The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. The "canvas" element is only a container for graphics. You must use JavaScript to actually draw the graphics. A canvas is a rectangular area on an HTML page, which, by default, has no border and no content. The markup looks like this: <canvas id="myCanvas" width="200" height="100"></canvas>
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
First of all, always specify an "id attribute" (to be referred to in a script), and a "width" and "height" attribute to define the size of the canvas. To add a border, use the "style" attribute.
Add a Javascript: after creating the rectangular canvas area, you must add a JavaScript to do the drawing.
The getContext() method returns an object that provides methods and properties for drawing on the canvas. The properties and methods of the getContext("2d") object can be used to draw text, lines, boxes, circles, and more on the canvas.
drawing a canvas
step 1: find the canvas element : finding the "canvas" element is done by using the HTML DOM method getElementById(): "var canvas = document.getElementById("myCanvas");".
step 2: create a drawing object : the getContext() is a built-in HTML object, with properties and methods for drawing: "var ctx = canvas.getContext("2d");"
step 3: draw on the canvas : to draw on the canvas, you have to set the fill style of the drawing object to a certain color: 'ctx.fillStyle = "#FF0000";'.
The HTML canvas is a two-dimensional grid: the upper-left corner of the canvas has the coordinates (0,0). The fillRect(0,0,150,75) method means: start at the upper-left corner (0,0) and draw a 150x75 pixels rectangle.
draw a line
To draw a straight line on a canvas, use the following methods:
moveTo(x,y) defines the starting point of the line.
lineTo(x,y) defines the ending point of the line.
To actually draw the line, you must use one of the "ink" methods, like stroke().
Example
code:
<div class="spec">
<canvas id="canvas_d1" width="200" height="200" style="border:1px solid black;">
Your browser does not support the canvas element.
</canvas>
<canvas id="canvas_d1a" width="200" height="200" style="border:1px solid black;">
Your browser does not support the canvas element.
</canvas>
</div>
<script>
var draw1 = document.getElementById("canvas_d1");
var ctx_draw1 = draw1.getContext("2d");
ctx_draw1.moveTo(0,0);
ctx_draw1.lineTo(200,200);
ctx_draw1.stroke();
var draw1a = document.getElementById("canvas_d1a");
var ctx_draw1a = draw1a.getContext("2d");
ctx_draw1a.moveTo(200,0);
ctx_draw1a.lineTo(0,200);
ctx_draw1a.stroke();
</script>
draw a circle
To draw a circle on a canvas, use the following methods:
beginPath() begins a path.
arc(x,y,r,startangle,endangle) creates an arc/curve. To create a circle with arc(): set "start angle" to 0 and "end angle" to 2*Math.PI. The x and y parameters define the x- and y-coordinates of the center of the circle. The r parameter defines the radius of the circle.
Example
code:
<div class="spec">
<canvas id="canvas-d2" width="200" height="200" style="border:0.1vw solid black;">
Your browser does not support the HTML canvas tag.</canvas>
<canvas id="canvas-d2a" width="200" height="200" style="border:0.1vw solid darkgreen;">
Your browser does not support the HTML canvas tag.</canvas>
</div>
<script>
var draw2 = document.getElementById("canvas-d2");
var ctx_draw2 = draw2.getContext("2d");
ctx_draw2.beginPath();
ctx_draw2.arc(95,95,60,0,2*Math.PI);
ctx_draw2.stroke();
var draw2a = document.getElementById("canvas-d2a");
var ctx_draw2a = draw2a.getContext("2d");
ctx_draw2a.beginPath();
ctx_draw2a.arc(90,70,40,0,2*Math.PI);
ctx_draw2a.stroke();
</script>
draw a text
To draw text on a canvas, the most important property and methods are:
font defines the font properties for the text.
fillText(text,x,y) draws "filled" text on the canvas.
strokeText(text,x,y) draws text on the canvas (no fill)
To add color to the text, use the fillStyle() method.
Examples - fillText()
code:
<div class="spec">
<canvas id="canvas-d3" width="200" height="200" style="border:0.1vw solid black;">
Your browser does not support the HTML canvas tag.</canvas>
<canvas id="canvas-d3a" width="200" height="200" style="border:0.1vw solid black;">
Your browser does not support the HTML canvas tag.</canvas>
</div>
<script>
var draw3 = document.getElementById("canvas-d3");
var ctx_draw3 = draw3.getContext("2d");
ctx_draw3.font = "2vw Arial";
ctx_draw3.fillText("Hello World",20,50);
var draw3a = document.getElementById("canvas-d3a");
var ctx_draw3a = draw3a.getContext("2d");
ctx_draw3a.font = "2vw Helvetia";
ctx_draw3a.fillText("Welcome",20,100);
</script>
Examples - strokeText()
code:
<div class="spec">
<canvas id="canvas-d4" width="300" height="200" style="border:0.1vw solid black;">
Your browser does not support the HTML canvas tag.</canvas>
<canvas id="canvas-d4a" width="300" height="200" style="border:0.1vw solid black;">
Your browser does not support the HTML canvas tag.</canvas>
</div>
<script>
var draw4 = document.getElementById("canvas-d4");
var ctx_draw4 = draw4.getContext("2d");
ctx_draw4.font = "2vw Arial";
ctx_draw4.strokeText("Hello World",10,50);
var draw4a = document.getElementById("canvas-d4a");
var ctx_draw4a = draw4a.getContext("2d");
ctx_draw4a.font = "3vw Helvetia";
ctx_draw4a.strokeText("Welcome",10,100);
</script>
draw linear gradient
Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.
createLinearGradient(x,y,x1,y1) creates a linear gradient.
Once we have a gradient object, we must add two or more color stops. The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).
Examples - linear gradient
code:
<div class="spec">
<canvas id="canvas-d5" width="300" height="200" style="border:0.1vw solid black;">
Your browser does not support the HTML canvas tag.</canvas>
<canvas id="canvas-d5a" width="300" height="200" style="border:0.1vw solid blue;">
Your browser does not support the HTML canvas tag.</canvas>
</div>
<script>
var draw5 = document.getElementById("canvas-d5");
var ctx_draw5 = draw5.getContext("2d");
// Create gradient
var grd = ctx_draw5.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx_draw5.fillStyle = grd;
ctx_draw5.fillRect(10, 10, 200, 150);
var draw5a = document.getElementById("canvas-d5a");
var ctx_draw5a = draw5a.getContext("2d");
// Create gradient
var grd = ctx_draw5a.createLinearGradient(50, 10, 10, 100);
grd.addColorStop(1, "blue");
grd.addColorStop(0, "green");
// Fill with gradient
ctx_draw5a.fillStyle = grd;
ctx_draw5a.fillRect(10, 10, 250, 150);
</script>
draw circular gradient
Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.
createRadialGradient(x,y,r,x1,y1,r1) creates a radial/circular gradient.
Once we have a gradient object, we must add two or more color stops. The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).
Examples -circular gradient
code:
<div class="spec">
<canvas id="canvas-d6" width="300" height="200" style="border:0.1vw solid black;">
Your browser does not support the HTML canvas tag.</canvas>
<canvas id="canvas-d6a" width="300" height="200" style="border:0.1vw solid black;">
Your browser does not support the HTML canvas tag.</canvas>
</div>
<script>
var draw6 = document.getElementById("canvas-d6");
var ctx_draw6 = draw6.getContext("2d");
// Create gradient
var grd_b = ctx_draw6.createRadialGradient(75, 50, 5, 90, 60, 100);
grd_b.addColorStop(0, "red");
grd_b.addColorStop(1, "white");
// Fill with gradient
ctx_draw6.fillStyle = grd_b;
ctx_draw6.fillRect(10, 10, 250, 150);
var draw6a = document.getElementById("canvas-d6a");
var ctx_draw6a = draw6a.getContext("2d");
// Create gradient
var grd_b = ctx_draw6.createRadialGradient(105, 70, 15, 110, 60, 150);
grd_b.addColorStop(1, "yellow");
grd_b.addColorStop(0, "green");
// Fill with gradient
ctx_draw6a.fillStyle = grd_b;
ctx_draw6a.fillRect(10, 10, 250, 150);
</script>
draw image
To draw an image on a canvas, use the following method:drawImage(image,x,y).
Examples - draw image
canvas to fill:
code:
<div class="grid1 spec">
<div>
<img id="flowers" src="../pics/img_flowers.jpg" alt="holiday" width="300" height="200"/>
</div>
<div>
<canvas id="canvas-d7" width="300" height="200" style="border:0.1vw solid black;">
Your browser does not support the HTML canvas tag.</canvas>
<p class="spec">canvas to fill:</p>
</div>
<p class="spec"><button onclick="drawImage()">Try it</button></p>
</div>
<script>
function drawImage() {
var draw7 = document.getElementById("canvas-d7");
var ctx_draw7 = draw7.getContext("2d");
var img = document.getElementById("flowers");
ctx_draw7.drawImage(flowers , 0 , 0, 300, 200);
}
</script>
The fillStyle property sets or returns the color, gradient, or pattern used to "fill the drawing". Property values include:
color: a CSS color value that indicates the fill color of the drawing. Default value is #000000.
gradient: a gradient object (linear or radial) used to fill the drawing
pattern: a pattern object to use to fill the drawing.
strokeStyle
The strokeStyle property sets or returns the color, gradient, or pattern used for "strokes". Property values include:
color: a CSS color value that indicates the stroke color of the drawing. Default value is #000000.
gradient: a gradient object (linear or radial) used to create a gradient stroke.
pattern: a pattern object used to create a pattern stroke.
shadowColor
The shadowColor property sets or returns the color to use for "shadows". Property values include:
color: the CSS color value to use for shadows. Default value is #000000.
shadowBlur
The shadowBlur property sets or returns the blur level for "shadows". Property values include:
number: the blur level for the shadow.
shadowOffsetX
The shadowOffsetX property sets or returns the "horizontal" distance of the shadow from the shape. "shadowOffsetX=0" indicates that the shadow is right behind the shape. "shadowOffsetX=20" indicates that the shadow starts 20 pixels to the right (from the shape's left position). "shadowOffsetX=-20" indicates that the shadow starts 20 pixels to the left (from the shape's left position).Property values include:
>number: a positive or negative number that defines the horizontal distance of the shadow from the shape.
shadowOffsetY
The shadowOffsetY property sets or returns the "vertical" distance of the shadow from the shape. "shadowOffsetY = 0" indicates that the shadow is right behind the shape. "shadowOffsetY = 20" indicates that the shadow starts 20 pixels below the shape's top position. "shadowOffsetY = -20" indicates that the shadow starts 20 pixels above the shape's top position. Property values include:
number: a positive or negative number that defines the vertical distance of the shadow from the shape
The lineCap property sets or returns the style of the end caps for a line. The value "round" and "square" make the lines slightly longer. Property values include:
butt: default; a flat edge is added to each end of the line.
round: a rounded end cap is added to each end of the line.
square: a square end cap is added to each end of the line.
lineJoin
The lineJoin property sets or returns the type of corner created, when two lines meet.
bevel: creates a beveled corner.
round: creates a rounded corner.
miter: default; creates a sharp corner.
lineWidth
The lineWidth property sets or returns the current line width, in pixels. Property values include:
number: the current line width, in pixels.
miterLimit
The miterLimit property sets or returns the maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. The miterLimit property works only if the "lineJoin" attribute is "miter". The miter length grows bigger as the angle of the corner gets smaller. To prevent the miter length from being too long, we can use the miterLimit property. If the miter length exceeds the miterLimit value, the corner will be displayed as lineJoin type "bevel". Property values include:
number: a positive number that specifies the maximum miter length. If the current miter length exceeds the miterLimit, the corner will display as lineJoin "bevel".
The font property sets or returns the current font properties for text content on the canvas. The font property uses the same syntax as the CSS font property. Property values include:
font-style: specifies the font style. Possible values: normal, italic, oblique.
font-variant: specifies the font variant. Possible values: normal, small-caps.
font-weight: specifies the font weight. Possible values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
font-size/line-height: specifies the font size and the line-height, in pixels.
font-family: specifies the font family.
caption: use the font captioned controls (like buttons, drop-downs, etc.).
icon: use the font used to label icons.
menu: use the font used in menus (drop-down menus and menu lists).
message-box: use the font used in dialog boxes.
small-caption: use the font used for labeling small controls.
status-bar: use the fonts used in window status bar.
textAlign
The textAlign property sets or returns the current alignment for text content, according to the anchor point. Normally, the text will START in the position specified, however, if you set textAlign="right" and place the text in position 150, it means that the text should END in position 150. Property values include:
start: default. The text starts at the specified position.
end: the text ends at the specified position.
center: the center of the text is placed at the specified position.
left: the text starts at the specified position.
right: the text ends at the specified position.
textBaseline
The textBaseline property sets or returns the current text baseline used when drawing text. Property values include:
alphabetic: default. The text baseline is the normal alphabetic baseline.
top: the text baseline is the top of the em square.
hanging: the text baseline is the hanging baseline.
middle: the text baseline is the middle of the em square.
ideographic: the text baseline is the ideographic baseline.
bottom: the text baseline is the bottom of the bounding box.
Example covering these properties
Examples
code:
<div class="spec">
<canvas id="canvas_prop4" width="500" height="300" style="border-radius: 1vw;
border: 0.2vw solid black;"></canvas>
<canvas id="canvas_prop5" width="500" height="300" style="border-radius: 1vw;
border: 0.2vw solid black;"></canvas>
</div>
<script>
var prop4 = document.getElementById("canvas_prop4");
var ctx_prop4 = prop4.getContext("2d");
// Create a red line in position 150
ctx_prop4.strokeStyle = "red";
ctx_prop4.moveTo(200, 10);
ctx_prop4.lineTo(200, 270);
ctx_prop4.lineWidth= 10;
ctx_prop4.stroke();
ctx_prop4.font = "1.2vw Arial";
// Show the different textAlign values
ctx_prop4.textAlign = "start";
ctx_prop4.fillText("textAlign=start", 205, 40);
ctx_prop4.textAlign = "end";
ctx_prop4.fillText("textAlign=end", 195, 80);
ctx_prop4.textAlign = "left";
ctx_prop4.fillText("textAlign=left", 205, 120);
ctx_prop4.textAlign = "center";
ctx_prop4.fillText("textAlign=center", 195, 160);
ctx_prop4.textAlign = "right";
ctx_prop4.fillText("textAlign=right", 205, 200);
var prop5 = document.getElementById("canvas_prop5");
var ctx_prop5 = prop5.getContext("2d");
//Draw a red line at y=100
ctx_prop5.strokeStyle = "red";
ctx_prop5.lineWidth = 10;
ctx_prop5.moveTo(5, 150);
ctx_prop5.lineTo(550, 150);
ctx_prop5.stroke();
ctx_prop5.font = "1.15vw Arial"
//Place each word at y=100 with different textBaseline values
ctx_prop5.textBaseline = "top";
ctx_prop5.fillText("Top", 5, 155);
ctx_prop5.textBaseline = "bottom";
ctx_prop5.fillText("Bottom", 105, 150);
ctx_prop5.textBaseline = "middle";
ctx_prop5.fillText("Middle", 205, 152);
ctx_prop5.textBaseline = "alphabetic";
ctx_prop5.fillText("Alphabetic", 305, 145);
ctx_prop5.textBaseline = "hanging";
ctx_prop5.fillText("Hanging", 405, 155);
</script>
width
The width property returns the width of an ImageData object, in pixels.
height
The height property returns the height of an ImageData object, in pixels.
data
The data property returns an object that contains image data of the specified ImageData object. For every pixel in an ImageData object there are four pieces of information, the RGBA values: R - the color red (from 0-255), G - the color green (from 0-255), B - the color blue (from 0-255), A - the alpha channel (from 0-255; 0 is transparent and 255 is fully visible). The color/alpha information is held in an array, and is stored in the data property of the ImageData object.
Examples
code:
<div class="spec">
<canvas id="canvas_prop6" width="400" height="200" style="border-radius: 1vw;
border: 0.2vw solid black;"></canvas>
</div>
<script>
var prop6 = document.getElementById("canvas_prop6");
var ctx_prop6 = prop6.getContext("2d");
var imgData = ctx_prop6.createImageData(100, 100);
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i+0] = 255;
imgData.data[i+1] = 0;
imgData.data[i+2] = 0;
imgData.data[i+3] = 255;
}
ctx_prop6.putImageData(imgData, 10, 10);
</script>
globalAlpha
The globalAlpha property sets or returns the current alpha or transparency value of the drawing. The globalAlpha property value must be a number between 0.0 (fully transparent) and 1.0 (no transparancy). Property values include:
number: the transparency value. Must be a number between 0.0 (fully transparent) and 1.0 (no transparancy).
The globalCompositeOperation property sets or returns how a source (new) image are drawn onto a destination (existing) image. "source image" = drawings you are about to place onto the canvas. "destination image" = drawings that are already placed onto the canvas. Property values include:
source-over: default. Displays the source image over the destination image.
source-atop: displays the source image on top of the destination image. The part of the source image that is outside the destination image is not shown.
source-in: displays the source image in to the destination image. Only the part of the source image that is INSIDE the destination image is shown, and the destination image is transparent.
source-out: displays the source image out of the destination image. Only the part of the source image that is OUTSIDE the destination image is shown, and the destination image is transparent.
destination-over: displays the destination image over the source image.
destination-atop: displays the destination image on top of the source image. The part of the destination image that is outside the source image is not shown.
destination-in: displays the destination image in to the source image. Only the part of the destination image that is INSIDE the source image is shown, and the source image is transparent.
destination-out: displays the destination image out of the source image. Only the part of the destination image that is OUTSIDE the source image is shown, and the source image is transparent.
lighter: displays the source image + the destination image.
copy: displays the source image. The destination image is ignored.
xor: the source image is combined by using an exclusive OR with the destination image.
createImageData(): creates a new, blank ImageData object: width, height, imagedata.
getImageData(): returns an ImageData object that copies the pixel data for the specified rectangle on a canvas: x, y, width, height.
putImageData(): puts the image data (from a specified ImageData object) back onto the canvas: imgData, x, y, dirtyX (optional), dirtyY (optional), dirtyWidth (optional), dirtyHeight (optional).
The createLinearGradient() method creates a linear gradient object. The gradient can be used to fill rectangles, circles, lines, text, etc. Parameter values include:
x0: the x-coordinate of the start point of the gradient.
y0: the y-coordinate of the start point of the gradient.
x1: the x-coordinate of the end point of the gradient.
y1: the y-coordinate of the end point of the gradient.
The createPattern()method repeats the specified element in the specified direction. The element can be an image, video, or another "canvas" element. The repeated element can be used to draw/fill rectangles, circles, lines etc. Parameter values include:
image: specifies the image, canvas, or video element of the pattern to use.
repeat: default; the pattern repeats both horizontally and vertically.
repeat-x: the pattern repeats only horizontally.
repeat-y: the pattern repeats only vertically.
no-repeat: the pattern will be displayed only once (no repeat).
Examples
Image to use:
canvas:
code:
<div class="spec">
<p>Image to use:</p>
<img src="../pics/search.png" id="search" style="width:2vw; height:2vw;">
<p>canvas:</p>
<canvas id="method2" width="400" height="200"
style="border-radius: 1vw; border: 0.2vw solid black;"></canvas> <br>
<button onclick="method2('repeat')">Repeat</button>
<button onclick="method2('repeat-x')">Repeat-x</button>
<button onclick="method2('repeat-y')">Repeat-y</button>
<button onclick="method2('no-repeat')">No-repeat</button>
</div>
<script>
function method2(direction) {
var method2 = document.getElementById("method2");
var ctx_method2 = method2.getContext("2d");
ctx_method2.clearRect(0, 0, method2.width, method2.height);
var img = document.getElementById("search")
var pat = ctx_method2.createPattern(img, direction);
ctx_method2.rect(0, 0, 150, 100);
ctx_method2.fillStyle = pat;
ctx_method2.fill();
}
method2();
</script>
createRadialGradient()
The createRadialGradient()method creates a radial/circular gradient object. The gradient can be used to fill rectangles, circles, lines, text, etc. Parameter values include:
x0: the x-coordinate of the starting circle of the gradient.
y0: the y-coordinate of the starting circle of the gradient.
r0: the radius of the starting circle.
x1: the x-coordinate of the ending circle of the gradient.
y1: the y-coordinate of the ending circle of the gradient.
The addColorStop()method specifies the colors and position in a gradient object. The addColorStop() method is used together with createLinearGradient() or createRadialGradient(). Parameter values include:
stop: a value between 0.0 and 1.0 that represents the position between start and end in a gradient.
color: a CSS color value to display at the stop position .
The clip()method clips a region of any shape and size from the original canvas. Once a region is clipped, all future drawing will be limited to the clipped region (no access to other regions on the canvas). You can however save the current canvas region using the save() method before using the clip() method, and restore it (with the restore() method) any time in the future.
The quadraticCurveTo()method adds a point to the current path by using the specified control points that represent a quadratic Bézier curve. A quadratic Bézier curve requires two points. The first point is a control point that is used in the quadratic Bézier calculation and the second point is the ending point for the curve. The starting point for the curve is the last point in the current path. If a path does not exist, use the beginPath() and moveTo() methods to define a starting point. Parameter values include:
cpx: the x-coordinate of the Bézier control point.
cpy: the y-coordinate of the Bézier control point.
The bezierCurveTo()method adds a point to the current path by using the specified control points that represent a cubic Bézier curve. A cubic bezier curve requires three points. The first two points are control points that are used in the cubic Bézier calculation and the last point is the ending point for the curve. The starting point for the curve is the last point in the current path. If a path does not exist, use the beginPath() and moveTo() methods to define a starting point. Parameter values include:
cp1x: the x-coordinate of the first Bézier control point.
cp1y: the y-coordinate of the first Bézier control point.
cp2x: the x-coordinate of the second Bézier control point.
cp2y: the y-coordinate of the second Bézier control point.
The arc()method creates an arc/curve (used to create circles, or parts of circles). To create a circle with arc(): set start angle to 0 and end angle to 2*Math.PI. Parameter values include:
x: the x-coordinate of the center of the circle.
y: the y-coordinate of the center of the circle.
r: the radius of the circle.
sAngle: the starting angle, in radians (0 is at the 3 o'clock position of the arc's circle) .
eAngle: the ending angle, in radians.
counterclockwise: optional; specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
The scale()method scales the current drawing, bigger or smaller. If you scale a drawing, all future drawings will also be scaled. The positioning will also be scaled. If you "scale(2,2);" drawings will be positioned twice as far from the left and top of the canvas as you specify. Parameter values include:
scalewidth: scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.).
scaleheight: scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.).
The rotate()method rotates the current drawing. The rotation will only affect drawings made AFTER the rotation is done. Parameter values include:
angle: the rotation angle, in radians. To calculate from degrees to radians: degrees*Math.PI/180. Example: to rotate 5 degrees, specify the following: 5*Math.PI/180 .
The translate()method remaps the (0,0) position on the canvas. When you call a method such as fillRect() after translate(), the value is added to the x- and y-coordinate values. Parameter values include:
x: the value to add to horizontal (x) coordinates.
The transform()method replaces the current transformation matrix. It lets you scale, rotate, move, and skew the current context. The transformation will only affect drawings made after the transform() method is called. The transform() method behaves relatively to other transformations made by rotate(), scale(), translate(), or transform(). Example: If you already have set your drawing to scale by two, and the transform() method scales your drawings by two, your drawings will now scale by four. Check out the setTransform() method, which does not behave relatively to other transformations. Parameter values include:
The setTransform()method resets the current transform to the identity matrix, and then runs transform() with the same arguments. In other words, the setTransform() method lets you scale, rotate, move, and skew the current context. The transformation will only affect drawings made after the setTransform method is called. Parameter values include:
The strokeText()method draws text (with no fill) on the canvas. The default color of the text is black. Parameter values include:
text: specifies the text that will be written on the canvas.
x: the x coordinate where to start painting the text (relative to the canvas).
y: the y coordinate where to start painting the text (relative to the canvas).
maxWidth: optional. The maximum allowed width of the text, in pixels.
Examples
code:
<canvas class="spec" id="method27" width="400" height="200"
style="border-radius: 1vw; border: 0.2vw solid black;"></canvas>
<script>
var method27 = document.getElementById("method27");
var ctx_method27 = method27.getContext("2d");
ctx_method27.font = "2vw Georgia";
ctx_method27.fillText("How are you doing!?!", 10, 50);
ctx_method27.font = "2.5vw Verdana";
// Create gradient
var gradient_method27 = ctx_method27.createLinearGradient(0, 0, method27.width, 0);
gradient_method27.addColorStop("0", "magenta");
gradient_method27.addColorStop("0.5", "blue");
gradient_method27.addColorStop("1.0", "red");
// Fill with gradient
ctx_method27.strokeStyle = gradient_method27;
ctx_method27.strokeText("A very Big smile!", 10, 100);
</script>
measureText()
The measureText()method returns an object that contains the width of the specified text, in pixels. Use this method if you need to know the width of a text, before writing it on the canvas. Parameter values include:
text: the text to be measured.
Examples
code:
<canvas class="spec" id="method28" width="400" height="200"
style="border-radius: 1vw; border: 0.2vw solid black;"></canvas>
<script>
var method28 = document.getElementById("method28");
var ctx_method28 = method28.getContext("2d");
ctx_method28.font = "2vw Arial";
var txt_method28 = "How are you doing!?"
ctx_method28.fillText("width:" + ctx_method28.measureText(txt_method28).width, 10, 50);
ctx_method28.fillText(txt_method28, 10, 100);
</script>
drawImage()
The drawImage()method draws an image, canvas, or video onto the canvas. The drawImage() method can also draw parts of an image, and/or increase/reduce the image size. Parameter values include:
img: specifies the image, canvas, or video element to use.
sx: optional. The x coordinate where to start clipping.
sy: optional. The y coordinate where to start clipping.
swidth: optional. The width of the clipped image.
sheight: optional. The height of the clipped image.
x: the x coordinate where to place the image on the canvas.
y: the y coordinate where to place the image on the canvas.
width: optional. The width of the image to use (stretch or reduce the image) .
height: optional. The height of the image to use (stretch or reduce the image) .
The createImageData()method creates a new, blank ImageData object. The new object's pixel values are transparent black by default. For every pixel in an ImageData object there are four pieces of information, the RGBA values: R - The color red (from 0-255),G - The color green (from 0-255), B - The color blue (from 0-255), A - The alpha channel (from 0-255; 0 is transparent and 255 is fully visible), So, transparent black indicates: (0,0,0,0). The color/alpha information is held in an array, and since the array contains 4 pieces of information for every pixel, the array's size is 4 times the size of the ImageData object: width*height*4. (An easier way to find the size of the array, is to use ImageDataObject.data.length). The array containing the color/alpha information is stored in the data property of the ImageData object. Parameter values include:
width: the width of the new ImageData object, in pixels.
height: the height of the new ImageData object, in pixels.
imageData: anotherImageData object.
Examples
code:
<canvas class="spec" id="method30" width="400" height="200"
style="border-radius: 1vw; border: 0.2vw solid black;"></canvas>
<script>
var method30 = document.getElementById("method30");
var ctx_method30 = method30.getContext("2d");
var imgData = ctx_method30.createImageData(100, 100);
var i;
for (i = 0; i <imgData.data.length; i += 4) {
imgData.data[i+0] = 255;
imgData.data[i+1] = 0;
imgData.data[i+2] = 0;
imgData.data[i+3] = 255;
}
ctx_method30.putImageData(imgData, 10, 10);
</script>
getImageData()
The getImageData()method returns an ImageData object that >copies the pixel data for the specified rectangle on a canvas. The ImageData object is not a picture, it specifies a part (rectangle) on the canvas, and holds information of every pixel inside that rectangle. For every pixel in an ImageData object there are four pieces of information, the RGBA values: R - The color red (from 0-255), G - The color green (from 0-255), B - The color blue (from 0-255), A - The alpha channel (from 0-255; 0 is transparent and 255 is fully visible). The color/alpha information is held in an array, and is stored in the data property of the ImageData object. Parameter values include:
x: the x coordinate (in pixels) of the upper-left corner to start copy from.
y: the y coordinate (in pixels) of the upper-left corner to start copy from.
width: the width of the rectangular area you will copy.
height: the height of the rectangular area you will copy.
<div class=spec>
<canvas id="canvas_path1" width="300" height="300"></canvas>
</div>
<script>
let path1 = document.getElementById('canvas_path1');
if (canvas_path1.getContext) {
let ctx_path1 = canvas_path1.getContext('2d');
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 3; j++) {
ctx_path1.beginPath();
let x = 65 + j * 70; // x coordinate
let y = 65 + i * 70; // y coordinate
let radius = 30; // Arc radius
let startAngle = 0; // Starting point on circle
let endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
let anticlockwise = i % 2 !== 0; // clockwise or anticlockwise
ctx_path1.arc(x, y, radius, startAngle, endAngle, anticlockwise);
if (i > 1) {
ctx_path1.fill();
} else {
ctx_path1.stroke();
}
}
}
}
</script>
scale(): scales the current drawing bigger or smaller: scalewidth, scaleheighht.
rotate(): rotates the current drawing: angle.
translate(): remaps the (0,0) position on the canvas: x, y.
transform(): replaces the current transformation matrix for the drawing: a (horizontal scaling), b (horizontal skewing), c (vertical skewing), d (vertical scaling), e (horizontal moving), f (vertical moving).
setTransform(): resets the current transform to the identity matrix. Then runs transform(): a (horizontal scaling), b (horizontal skewing), c (vertical skewing), d (vertical scaling), e (horizontal moving), f (vertical moving).
drawImage(): draws an image, canvas, or video onto the canvas: img, sx (optional), sy (optional), swidth (optional), sheight (optional), x, y, width, height.
height: returns the height of an ImageData object .
data: returns an object that contains image data of a specified ImageData object.
Examples
code:
<div class="spec">
<canvas id="pix1" width="300" height="200"
style="border-radius: 1vw; border: 0.2vw solid black;"></canvas>
</div>
<script>
var pix1 = document.getElementById("pix1");
var ctx_pix1 = pix1.getContext("2d");
var imgData = ctx_pix1.createImageData(100, 100);
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
ctx_pix1.putImageData(imgData, 10, 10);
</script>
methods
createImageData(): creates a new, blank ImageData object: width, height, imagedata.
getImageData(): returns an ImageData object that copies the pixel data for the specified rectangle on a canvas: x, y, width, height.
putImageData(): puts the image data (from a specified ImageData object) back onto the canvas: imgData, x, y, dirtyX (optional), dirtyY (optional), dirtyWidth (optional), dirtyHeight (optional).
globalAlpha: sets or returns the current alpha or transparency value of the drawing: number.
globalCompositeOperation: sets or returns how a new image are drawn onto an existing image: source-over, source-atop, source-in, source-out, destination-over, destination-atop, destination-in, destination-out, lighter, copy, xor.
