Categories
HTML JavaScript Web development

HTML Canvas Reference

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (JavaScript).

Style, Colors, Shadows:

fillStyledefines the color, gradient, or pattern used to fill the drawing.
strokeStyledefines the color, gradient, or pattern used for strokes.
shadowColorsets or returns the color to use for shadows.
shadowBlursets or returns the blur level for shadows.
shadowOffsetXsets or returns the horizontal distance of the shadow from the shape.
shadowOffsetYsets or returns the vertical distance of the shadow from the shape.

Method:

createLinearGradient()creates a linear gradient.
createRadialGradient()creates a radial gradient.
addColorStop()defines the colors and position in a gradient object.
createPattern()defines the specified element in the specified direction.

Line Styles:

lineCapsets or returns the style of the end caps for a line.
lineJoinsets or returns the type of corner created, when two lines meet.
lineWidthsets or returns the current line width (px).
miterLimitsets or returns the maximum miter length.

Rectangles:

rect()draws a rectangle.
fillRect()creates a “filled” rectangle.
strokeRect()creates a rectangle (no fill).
clearRect()clears the defined pixels within a given rectangle.

Paths:

Method:

fill()fills the current path.
stroke()draws the path.
beginPath()begins a path.
moveTo()moves the path to the specified point in the canvas.
closePath()draws a path from the current point back to the starting point.
lineTo()adds a new point and creates a line to that point from the last specified point in the canvas.
clip()clips any shape and size from the original canvas.
quadraticCurveTo()draws a quadratic Bézier curve.
bezierCurveTo()draws a cubic Bézier curve.
arc()creates an arc/curve/circle.
arcTo()creates an arc/curve between two tangents.
isPointInPath()returns true if the specified point is in the current path, otherwise false.

Transformations:

scale()scales the current drawing (smaller/bigger).
rotate()rotates the current drawing.
translate()remaps the (0,0) position on the canvas.
transform()scale, rotate, move, and skew the current context.
setTransform()resets the current transform to the identity matrix, and then runs transform().

Text:

fontsets the current font properties for text content on the canvas.
textAlignsets the current alignment for text content.
textBaselinesets or returns the current text baseline used when drawing text.

Method:

fillText()draws filled text on the canvas.
strokeText()draws text (no fill) on the canvas.
measureText()returns an object that contains the width of the specified text.

Image Drawing:

drawImage()creates an image, canvas, or video onto the canvas.

Composing:

globalAlphasets the current alpha or transparency value of the drawing.
globalCompositeOperationsets how a source (new) image is drawn into a destination (existing) image.
Categories
HTML JavaScript Web development

HTML canvas globalCompositeOperation Property

HTML canvas globalCompositeOperation Property

The HTML canvas globalCompositeOperation property sets how a source (new) image is drawn into a destination (existing) image.

Example:

<!DOCTYPE html>
<html>
<body>

<canvas id="composite" width="300" height="150" style="border:1px solid #333;">
</canvas>

<script>
var c = document.getElementById("composite");
var ctx = c.getContext("2d");
ctx.fillStyle = "#2a9d8f";
ctx.fillRect(40, 20, 75, 75);
ctx.fillStyle = "#e9c46a";
ctx.globalCompositeOperation = "source-over";
ctx.fillRect(60, 50, 75, 75);
ctx.fillStyle = "#2a9d8f";
ctx.fillRect(160, 20, 75, 75);
ctx.fillStyle = "#e9c46a";
ctx.globalCompositeOperation = "destination-over";
ctx.fillRect(190, 50, 75, 75);
</script>

</body>
</html>

Output:

Syntax:

context.globalCompositeOperation="source-in";

source-over (default) – displays the source image over the existing image.

source-atop – displays the source image on top of the existing image.

source-in – displays the source image into the existing image.

source-out – displays the source image out of the destination image.

destination-over – displays the destination image over the source image.

destination-atop – displays the existing image on top of the source image.

destination-in – displays the destination image into the source image.

destination-out – displays the destination image out of the source image.

lighter – displays the source image + the destination image.

copy – displays the source image (the existing image is ignored).

xor – the source image is combined by using an exclusive OR with the destination image.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
canvas {
  border: 1px solid #333;
  margin-right: 15px;
  margin-bottom: 20px;
}
</style>
</head>
<body>

<script>
var gco = new Array();
gco.push("source-atop");
gco.push("source-in");
gco.push("source-out");
gco.push("source-over");
gco.push("destination-atop");
gco.push("destination-in");
gco.push("destination-out");
gco.push("destination-over");
gco.push("lighter");
gco.push("copy");
gco.push("xor");

var n;
for (n = 0; n < gco.length; n++) {
  document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");
  var c = document.createElement("canvas");
  c.width = 100;
  c.height = 100;
  document.getElementById("p_" + n).appendChild(c);
  var ctx = c.getContext("2d");    
  ctx.fillStyle = "#2a9d8f";
  ctx.fillRect(10, 10, 50, 50);
  ctx.globalCompositeOperation = gco[n];
  ctx.beginPath();
  ctx.fillStyle = "#e9c46a";
  ctx.arc(50, 50, 30, 0, 2 * Math.PI);
  ctx.fill();
  document.write("</div>");
}
</script>

</body>
</html>

Output:

HTML canvas globalCompositeOperation Property

Enjoy coding!

Categories
HTML JavaScript Web development

HTML Canvas global/Alpha property

The HTML canvas globalAlpha property sets the alpha or transparency value of the drawing.

Syntax:

context.globalAlpha=number;

number – the value must be a number between 0.0 (fully transparent) and 1.0 (no transparency).

Example:

<!DOCTYPE html>
<html>
<body>

<canvas id="transparency" width="200" height="200" style="border:1px solid #333;"></canvas>

<script>
var c = document.getElementById("transparency");
var ctx = c.getContext("2d");
ctx.fillStyle = "#2a9d8f";
ctx.fillRect(30, 30, 75, 75);
ctx.globalAlpha = 0.4;
ctx.fillStyle = "#e76f51"; 
ctx.fillRect(60, 60, 75, 75); 
ctx.fillStyle = "#e9c46a"; 
ctx.fillRect(90, 90, 75, 75);
</script>

</body>
</html>

Output:


Enjoy coding!