247AppsStudio Blog

HTML5 Canvas Element

Html5 canvas element

<canvas id="myCanvas" width="500" height="300">

Html5 canvas element with fallback content

<canvas id="myCanvas" width="500" height="300">
  your browser doesn't support canvas!
</canvas>

2d context

var context = canvas.getContext('2d');

Webgl context (3d)

var context = canvas.getContext('webgl');

Shapes

Draw rectangle

context.rect(x, y, width, height);
context.fill();
context.stroke();

Fill rectangle shorthand

context.fillRect(x, y, width, height);

Stroke rectangle shorthand

context.strokeRect(x, y, width, height);

Draw circle

context.arc(x, y, radius, 0, Math.PI * 2);
context.fill();
context.stroke();

Styles

Fill

context.fillStyle = 'red';
context.fill();

Stroke

context.strokeStyle = 'red';
context.stroke();

Linear gradient

var grd = context.createLinearGradient(x1, y1, x2, y2);
grd.addColorStop(0, 'red');   
grd.addColorStop(1, 'blue');
context.fillStyle = grd;
context.fill();

Radial gradient

var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'blue');
context.fillStyle = grd;
context.fill();

Pattern

var imageObj = new Image();
imageObj.onload = function() {
  var pattern = context.createPattern(imageObj, 'repeat');
  context.fillStyle = pattern;
  context.fill();
};
imageObj.src = 'path/to/my/image.jpg';

Line Join

context.lineJoin = 'miter|round|bevel';

Line Cap

context.lineCap = 'butt|round|square';

Shadow

context.shadowColor = 'black';
context.shadowBlur = 20;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;

Alpha (Opacity)

context.globalAlpha = 0.5; // between 0 and 1

Color Formats

String

context.fillStyle = 'red';

Hex Long

context.fillStyle = '#ff0000';

Hex Short

context.fillStyle = '#f00';

RGB

context.fillStyle = 'rgb(255,0,0)';

RGBA

context.fillStyle = 'rgba(255,0,0,1)';

Paths

Begin Path

context.beginPath();

Line

context.lineTo(x, y);

Arc

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

Quadratic curve

context.quadraticCurveTo(cx, cy, x, y);

Bezier curve

context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);

Close Path

context.closePath();

Images

Draw Image with default size

var imageObj = new Image();
imageObj.onload = function() {
  context.drawImage(imageObj, x, y);
};
imageObj.src = 'path/to/my/image.jpg';

Draw image and set size

var imageObj = new Image();
imageObj.onload = function() {
  context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'path/to/my/image.jpg';

Crop image

var imageObj = new Image();
imageObj.onload = function() {
  context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);
};
imageObj.src = 'path/to/my/image.jpg';

Text

Fill Text

context.font = '40px Arial';
context.fillStyle = 'red';
context.fillText('Hello World!', x, y);

Stroke Text

context.font = '40pt Arial';
context.strokeStyle = 'red';
context.strokeText('Hello World!', x, y);

Bold Text

context.font = 'bold 40px Arial';

Italic Text

context.font = 'italic 40px Arial';

Text Align

context.textAlign = 'start|end|left|center|right';

Text Baseline

context.textBaseline = 'top|hanging|middle|alphabetic|ideographic
|bottom';

Get Text Width

var width = context.measureText('Hello world').width;

Transforms

Translate

context.translate(x, y);

Scale

context.scale(x, y);

Rotate

context.rotate(radians);

Flip Horizontally

context.scale(-1, 1);

Flip Vertically

context.scale(1, -1);

Custom Transform

context.transform(a, b, c, d ,e, f);

Set Transform

context.setTransform(a, b, c, d ,e, f);

Shear

context.transform(1, sy, sx, 1, 0, 0);

Reset

context.setTransform(1, 0, 0, 1, 0, 0);

State Stack

Push State onto Stack

context.save();

Pop State off of Stack

context.restore();

Clipping

Clip

// draw path here
context.clip();

Image Data

Get Image Data

var imageData = context.getImageData(x, y, width, height);
var data = imageData.data;

Loop Through Image Pixels

var imageData = context.getImageData(x, y, width, height);
var data = imageData.data;
var len = data.length;
var i, red, green, blue, alpha;

for(i = 0; i < len; i += 4) {
  red = data[i];
  green = data[i + 1];
  blue = data[i + 2];
  alpha = data[i + 3];
}

Loop Through Image Pixels With Coordinates

var imageData = context.getImageData(x, y, width, height);
var data = imageData.data;
var x, y, red, green, blue, alpha;

for(y = 0; y < imageHeight; y++) {
  for(x = 0; x < imageWidth; x++) {
    red = data[((imageWidth * y) + x) * 4];
    green = data[((imageWidth * y) + x) * 4 + 1];
    blue = data[((imageWidth * y) + x) * 4 + 2];
    alpha = data[((imageWidth * y) + x) * 4 + 3];
  }
}

Set Image Data

context.putImageData(imageData, x, y);

Data URLs

Get Data URL

var dataURL = canvas.toDataURL();

Render Canvas with Data URL

var imageObj = new Image();
imageObj.onload = function() {
  context.drawImage(imageObj, 0, 0);
};

imageObj.src = dataURL;

Composites

Composite Operations

context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|xor|copy';