Canvas Pad |
|
|
Script console (editable)
|
Canvas
|
|
|
||
|
|
// Draw black rect
ctx.fillRect(50, 20, 145, 145);
// Draw blue rect
ctx.fillStyle = "rgb(0, 162, 232)";
ctx.fillRect(135, 85, 125, 125);
// Increase line width
ctx.lineWidth = 5;
// Draw black rect outline
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.strokeRect(50, 335, 145, 145);
// Draw blue rect outline
ctx.strokeStyle = "rgb(0, 162, 232)";
ctx.strokeRect(135, 275, 125, 125);
// Draw transparent yellow rect
ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
ctx.fillRect(210, 180, 125, 125);
// Set text settings
ctx.textBaseline = "top";
ctx.textAlign = "left";
// Simple text example
ctx.fillText("IE9 supports HTML5 Canvas", 0, 0);
// Transparent black text
ctx.font = '24px "Segoe UI"';
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillText("IE9 supports HTML5 Canvas", 0, 30);
// Stroke text with shadow
ctx.save();
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0, 0, 0, 1)";
ctx.font = '72px "Segoe UI" bold';
ctx.strokeText("IE9 supports HTML5 Canvas", 0, 70);
// Gradient text with shadow
var gradient = ctx.createLinearGradient(0,160,0,300);
gradient.addColorStop(0, "#0080FF");
gradient.addColorStop(1, "#FFFFFF");
ctx.fillStyle = gradient;
ctx.font = '127px "Segoe UI" bold';
ctx.fillText("IE9 supports HTML5 Canvas", 0, 160);
ctx.strokeText("IE9 supports HTML5 Canvas", 0, 160);
ctx.restore();
// Pattern text
var image = document.getElementById("ie_small");
var pattern = ctx.createPattern(image, "repeat");
ctx.fillStyle = pattern;
ctx.font = '254px "Segoe UI" bold';
ctx.fillText("IE9 supports HTML5 Canvas", 0, 275);
ctx.strokeText("IE9 supports HTML5 Canvas", 0, 275);
// Draw black circle
ctx.beginPath();
ctx.fillStyle = "rgb(0 ,0 ,0)";
ctx.arc(123, 93, 80, 0, 2*Math.PI, true);
ctx.fill();
// Draw blue circle
ctx.beginPath();
ctx.fillStyle = "rgb(0, 162, 232)";
ctx.arc(198, 158, 70, 0, 2*Math.PI, true);
ctx.fill();
// Increase line width
ctx.lineWidth = 5;
// Draw black stroke circle
ctx.beginPath();
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.arc(123, 408, 80, 0, 1.5*Math.PI, false);
ctx.stroke();
// Draw partial blue stroke circle
ctx.beginPath();
ctx.strokeStyle = "rgb(0, 162, 232)";
ctx.arc(198, 328, 70, 0, 0.5*Math.PI, true);
ctx.stroke();
// Draw transparent yellow circle
ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
ctx.arc(273, 243, 70, 0, 2*Math.PI, true);
ctx.fill();
// Draw the "e"
ctx.beginPath();
ctx.moveTo(194, 104);
ctx.quadraticCurveTo(54, 104, 54, 246);
ctx.quadraticCurveTo(54, 371, 194, 371);
ctx.quadraticCurveTo(324, 371, 338, 272);
ctx.lineTo(240, 272);
ctx.arc(197, 272, 47, 0, Math.PI, false);
ctx.lineTo(150, 256);
ctx.lineTo(338, 256);
ctx.quadraticCurveTo(338, 104, 194, 104);
ctx.moveTo(154, 207);
ctx.fillStyle = "rgb(9, 126, 196)";
ctx.fill();
ctx.closePath();
// Inner arc of e
ctx.beginPath();
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.lineTo(240, 211);
ctx.arc(197, 211, 47, 0, Math.PI, true);
ctx.fill();
ctx.closePath();
// Draw eye
ctx.lineWidth = 20;
ctx.beginPath();
ctx.moveTo(230, 130);
ctx.bezierCurveTo(230, 130, 230, 130, 230, 210);
ctx.stroke();
// Draw eye
ctx.beginPath();
ctx.moveTo(170, 130);
ctx.bezierCurveTo(170, 130, 170, 130, 170, 210);
ctx.stroke();
// Draw smile
ctx.beginPath();
ctx.moveTo(100, 230);
ctx.bezierCurveTo(100, 230, 200, 380, 300, 230);
ctx.stroke();
// Draw tongue
ctx.beginPath();
ctx.moveTo(219, 298);
ctx.bezierCurveTo(278, 351, 315, 315, 277, 258);
ctx.stroke();
// Draw image
var image = document.getElementById("ie");
ctx.drawImage(image, -10, 45, 400, 400);
// Set initial alpha
var a = 1;
for (j = 0; j < 100; j++)
{
// Initial values for color
var r = 255, g = 0, b = 0;
// Fill row with colors
for (i = 0; i < 150; i++)
{
// Yellow - increase G
if(i < 25) g += 10.2;
// Green - decrease R
else if( i >= 25 && i < 50) r -= 10.2;
// Blue - increase B, decrease G
else if(i >= 50 && i < 75)
{
g -= 10.2;
b += 10.2;
}
// Purple - increase B, decrease G
else if(i >= 75 && i < 100) r += 10.2;
// Red - decrease B
else b -= 10.2;
// Draw rect
ctx.fillStyle = "rgba(" + Math.floor(r) + "," +
Math.floor(g) + "," +
Math.floor(b) + "," + a + ")";
ctx.fillRect(3*i, 5*j, 3, 5);
}
// Reduce alpha
a -= 0.01;
}
// Set initial alpha
var a = 1;
for (j = 0; j < 100; j++)
{
// Initial values for color
var r = 255, g = 0, b = 0;
// Fill row with colors
for (i = 0; i < 150; i++)
{
// Yellow - increase G
if(i < 25) g += 10.2;
// Green - decrease R
else if( i >= 25 && i < 50) r -= 10.2;
// Blue - increase B, decrease G
else if(i >= 50 && i < 75)
{
g -= 10.2;
b += 10.2;
}
// Purple - increase B, decrease G
else if(i >= 75 && i < 100) r += 10.2;
// Red - decrease B
else b -= 10.2;
// Draw rect
ctx.strokeStyle = "rgba(" + Math.floor(r) + "," +
Math.floor(g) + "," +
Math.floor(b) + "," + a + ")";
ctx.strokeRect(3 * i, 5 * j, 3, 5);
}
// Reduce alpha
a -= 0.01;
}
// Draw lines with decreasing widths
for (i = 20; i > 0; i--)
{
ctx.strokeStyle = "black";
ctx.lineWidth = i;
ctx.beginPath();
ctx.moveTo(55, 20 + (20 - i) * 24);
ctx.lineTo(335, 20 + (20 - i) * 24);
ctx.stroke();
}
// Set text
ctx.textBaseline = "top";
ctx.textAlign = "left";
ctx.font = '24px "Segoe UI"';
// Create array with lineCap style names
var styles = ["round", "square", "butt"];
for(i = 0; i < styles.length; i++)
{
ctx.fillStyle = "rgb(0, 89, 187)";
ctx.fillText(styles[i], 10, 75 + i * 125);
// Draw the lineCaps
ctx.strokeStyle = "black";
ctx.lineWidth = 50;
ctx.lineCap = styles[i];
ctx.beginPath();
ctx.moveTo(125, 125 + i * 125);
ctx.lineTo(350, 125 + i * 125);
ctx.stroke();
// Draw horizontal guidelines
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(60, 125 + i * 125);
ctx.lineTo(390, 125 + i * 125);
ctx.stroke();
}
// Draw vertical guidelines
ctx.beginPath();
ctx.moveTo(125, 75);
ctx.lineTo(125, 425);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(350, 75);
ctx.lineTo(350, 425);
ctx.stroke();
// Set text
ctx.textBaseline = "top";
ctx.textAlign = "left";
ctx.font = '24px "Segoe UI"';
// Create array with lineJoin style names
var styles = ["bevel", "round", "miter"];
for (i = 0; i < styles.length; i++)
{
ctx.fillStyle = "rgb(0, 89, 187)";
ctx.fillText( styles[i], 40, 50 + i * 150);
ctx.lineJoin = styles[i];
ctx.lineWidth = 75;
ctx.strokeStyle = "black";
// Draw the lineJoins
ctx.beginPath();
ctx.moveTo(155, 90 + i * 150);
ctx.lineTo(225, 90 + i * 150);
ctx.lineTo(225, 150 + i * 150);
ctx.stroke();
// Draw the horizonal guidelines
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(100, 90 + i * 150);
ctx.lineTo(300, 90 + i * 150);
ctx.stroke();
}
// Draw the vertical guidelines
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(155, 30);
ctx.lineTo(155, 470);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(225, 30);
ctx.lineTo(225, 470);
ctx.stroke();
// Define gradients
var gradient1 = ctx.createLinearGradient(0, 0, 0, 500);
gradient1.addColorStop(0, "#00ABEB");
gradient1.addColorStop(1, "white");
var gradient2 = ctx.createLinearGradient(0, 25, 0, 450);
gradient2.addColorStop(0, "red");
gradient2.addColorStop(0.4, "white");
gradient2.addColorStop(1, "red");
var gradient3 = ctx.createRadialGradient(0, 0, 50, 0, 0, 100);
gradient3.addColorStop(0, "#F4F201");
gradient3.addColorStop(0.8, "#E4C700");
gradient3.addColorStop(1, "rgba(228,199,0,0)");
var gradient4 = ctx.createRadialGradient(250, 1, 1, 250, 1, 225);
gradient4.addColorStop(0, "white");
gradient4.addColorStop(1, "gray");
// Draw sky
ctx.fillStyle = gradient1;
ctx.fillRect(0,0,400,500);
// Draw sun
ctx.fillStyle = gradient3;
ctx.fillRect(0,0,100,100);
// Draw clouds
ctx.fillStyle = gradient4;
ctx.beginPath();
ctx.arc(310, 50, 25, 9, Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.arc(340, 50, 30, 9, Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.arc(370, 50, 25, 9, Math.PI, true);
ctx.fill();
// Draw kite
ctx.beginPath();
ctx.moveTo(200, 25);
ctx.lineTo(50, 200);
ctx.lineTo(200, 450);
ctx.lineTo(350, 200);
ctx.lineTo(200, 25);
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fill();
// Draw divisions
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(200, 25);
ctx.lineTo(200, 200);
ctx.lineTo(350,200);
ctx.fillStyle = gradient2;
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(200, 200);
ctx.lineTo(200,450);
ctx.fillStyle = gradient2;
ctx.fill();
ctx.stroke();
// Draw tail
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(200, 450);
ctx.bezierCurveTo(75, 460, 155, 350, 36, 290);
ctx.stroke();
// Draw bow
ctx.beginPath();
ctx.moveTo(8, 290);
ctx.lineTo(62, 290);
ctx.lineTo(58, 270);
ctx.lineTo(12, 310);
ctx.lineTo(8, 290);
ctx.fillStyle = gradient2;
ctx.fill();
ctx.stroke();
// Draw kite outline
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.beginPath();
ctx.moveTo(200, 25);
ctx.lineTo(50, 200);
ctx.lineTo(200, 450);
ctx.lineTo(350, 200);
ctx.lineTo(200, 25);
ctx.stroke();
// Create pattern
var image = document.getElementById("ie_small");
var pattern = ctx.createPattern(image, "repeat");
ctx.fillStyle = pattern;
// Draw the "e"
drawClearCenteredE();
function drawClearCenteredE()
{
ctx.beginPath();
ctx.moveTo(194, 104);
ctx.quadraticCurveTo(54, 104, 54, 246);
ctx.quadraticCurveTo(54, 371, 194, 371);
ctx.quadraticCurveTo(324, 371, 338, 272);
ctx.lineTo(240, 272);
ctx.arc(197, 272, 47, 0, Math.PI, false);
ctx.lineTo(150, 256);
ctx.lineTo(338, 256);
ctx.quadraticCurveTo(338, 104, 194, 104);
ctx.moveTo(154, 207);
ctx.fill();
ctx.closePath();
// Inner arc of e
ctx.beginPath();
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.lineTo(240, 211);
ctx.arc(197, 211, 47, 0, Math.PI, true);
ctx.fill();
ctx.closePath();
}
// Set shadow styles
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
ctx.shadowColor = "rgba(0, 0, 0, 1)";
// Set text
ctx.fillStyle = "black";
ctx.font = "72px Segoe UI";
ctx.fillText("Canvas", 90, 60);
// Add IE logo
var image = document.getElementById("ie");
ctx.drawImage(image, 70, 70, 250, 250);
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, 250, 0);
gradient.addColorStop(0, "#0080FF");
gradient.addColorStop(1, "#FFFFFF");
// Add gradient fill to a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(25, 330, 340, 20);
// Draw transparent blue circles
ctx.beginPath();
ctx.fillStyle = "rgba(30, 144, 255, 0.25)";
ctx.arc(50, 420, 30, 0, 2 * Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "rgba(30, 144, 255, 0.5)";
ctx.arc(150, 420, 30, 0, 2 * Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "rgba(30, 144, 255, 0.75)";
ctx.arc(250, 420, 30, 0, 2 * Math.PI, true);
ctx.fill();
// Draw opaque blue circle
ctx.beginPath();
ctx.fillStyle = "rgba(30, 144, 255, 1)";
ctx.arc(350, 420, 30, 0, 2 * Math.PI, true);
ctx.fill();
// Draw to center of the screen
ctx.translate(200, 250);
// Rotate
for (i = 0; i < 10; i++)
{
ctx.rotate(0.2 * Math.PI);
ctx.fillStyle = "rgba(0, 128, 255, 0.5)";
ctx.fillRect(10, 0, 150, 50);
}
// Draw transparent yellow circle
ctx.lineWidth = 2;
ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
ctx.arc(80, 80, 70, 0, 2 * Math.PI, true);
ctx.fill();
ctx.stroke();
// Scale
ctx.translate(75,100);
ctx.scale(2,2);
// Draw transparent yellow circle
ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
ctx.arc(80, 80, 70, 0, 2 * Math.PI, true);
ctx.fill();
ctx.stroke();
// Center to screen
ctx.translate(200, 250);
// Control the rotation (try changing it)
var x = 6;
var sine = Math.sin(1 / (x - 1) * Math.PI);
var cose = Math.cos(1 / x * Math.PI);
for (i = 0; i <= 2 * x; i++)
{
var color = 255 / (2 * x) * i;
ctx.fillStyle = "rgba(" + color + "," + color + "," + color + ", 0.9)";
// Draw the "e" without a fillStyle
drawClearE();
// Using the rotation transformation matrix
ctx.transform(cose, sine, -sine, cose, 0, 0);
}
function drawClearE()
{
// e
ctx.save();
ctx.beginPath();
ctx.moveTo(70, 0);
ctx.quadraticCurveTo(0, 0, 0, 71);
ctx.quadraticCurveTo(0, 133.5, 70, 133.5);
ctx.quadraticCurveTo(135, 133.5, 142, 84);
ctx.lineTo(93, 84);
ctx.arc(71.5, 84, 21.5, 0, Math.PI, false);
ctx.lineTo(50, 76);
ctx.lineTo(142,76);
ctx.quadraticCurveTo(142, 0, 70, 0);
ctx.moveTo(50, 53.5);
ctx.fill();
ctx.closePath();
ctx.strokeStyle = "black";
ctx.stroke();
// inner arc of e
ctx.beginPath();
ctx.fillStyle = "white";
ctx.lineTo(93, 53.5);
ctx.arc(71.5, 53.5, 21.5, 0, Math.PI,true);
ctx.fill();
ctx.closePath();
ctx.strokeStyle = "black";
ctx.stroke();
ctx.restore();
}
// Create a timer
var index = 0;
timer1 = setInterval(renderLoop, 16);
function renderLoop()
{
if (index > 600) index = 0;
index += 4;
draw(index);
}
function draw(x)
{
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 400, 500);
// Create a clipping region
ctx.save();
ctx.beginPath();
ctx.arc(x, x, 200, 0, Math.PI * 2, true);
ctx.clip();
// Create a white background
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 400, 500);
// Draw smiley
drawSmiley();
// Restore state
ctx.restore();
}
function drawSmiley()
{
// Draw eye
ctx.lineWidth = 20;
ctx.beginPath();
ctx.moveTo(230, 130);
ctx.bezierCurveTo(230, 130, 230, 130, 230, 210);
ctx.stroke();
// Draw eye
ctx.beginPath();
ctx.moveTo(170, 130);
ctx.bezierCurveTo(170, 130, 170, 130, 170, 210);
ctx.stroke();
// Draw smile
ctx.beginPath();
ctx.moveTo(100, 230);
ctx.bezierCurveTo(100, 230, 200, 380, 300, 230);
ctx.stroke();
// Draw tongue
ctx.beginPath();
ctx.moveTo(219, 298);
ctx.bezierCurveTo(278, 351, 315, 315, 277, 258);
ctx.stroke();
}
var lastX = WIDTH * Math.random();
var lastY = HEIGHT * Math.random();
function line() {
ctx.save();
ctx.translate(WIDTH / 2, HEIGHT / 2);
ctx.scale(0.9, 0.9);
ctx.translate(-WIDTH / 2, -HEIGHT / 2);
ctx.beginPath();
ctx.lineWidth = 5 + Math.random() * 10;
ctx.moveTo(lastX, lastY);
lastX = WIDTH * Math.random();
lastY = HEIGHT * Math.random();
ctx.bezierCurveTo(WIDTH * Math.random(),
HEIGHT * Math.random(),
WIDTH * Math.random(),
HEIGHT * Math.random(),
lastX, lastY);
var r = Math.floor(Math.random() * 255) + 70;
var g = Math.floor(Math.random() * 255) + 70;
var b = Math.floor(Math.random() * 255) + 70;
var s = 'rgba(' + r + ',' + g + ',' + b +', 1.0)';
ctx.shadowColor = 'white';
ctx.shadowBlur = 10;
ctx.strokeStyle = s;
ctx.stroke();
ctx.restore();
}
timer1 = setInterval(line, 50);
function blank() {
ctx.fillStyle = 'rgba(0,0,0,0.1)';
ctx.fillRect(0, 0, WIDTH, HEIGHT);
}
timer2 = setInterval(blank, 40);
// Increase line width
ctx.lineWidth = 10;
// Draw outer circle
ctx.beginPath();
ctx.arc(145, 225, 50, 0, Math.PI, true);
ctx.moveTo(95, 225);
ctx.lineTo(195, 330);
// Set a shear transform matrix
ctx.setTransform(1, 4, 0, 1, 0, 0);
ctx.stroke();
// Reset to identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);
// Draw outer circle
ctx.beginPath();
ctx.arc(245, 225, 50, 0, Math.PI, true);
ctx.moveTo(295, 225);
ctx.lineTo(195, 330);
// Set a shear transform matrix
ctx.setTransform(1, -4, 0, 1, 0, 0);
ctx.stroke();
// Create a timer to draw the video
timer1 = setInterval(drawVideo, 16);
function drawVideo()
{
if (!isNaN(video.duration))
{
// Play the video
video.play();
// Draw the video
ctx.drawImage(video, 0, 0, 400, 500);
}
}
var lastX = 0, lastY = 0, count = 0;
var r = Math.floor(Math.random()*255)+70;
var g = Math.floor(Math.random()*255)+70;
var b = Math.floor(Math.random()*255)+70;
timer1 = setInterval(drawLoop, 16);
function drawLines(x, y)
{
ctx.lineWidth = 40;
ctx.lineCap = "round";
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.strokeStyle = "rgba(" + r + "," + g + "," + b + ", 1)";
ctx.stroke();
}
function drawLoop()
{
// Clear first
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
// Draw lines
drawLines(currentX, currentY);
// Change up color
if (count++ > 50)
{
count = 0;
r = Math.floor(Math.random() * 255) + 70;
g = Math.floor(Math.random() * 255) + 70;
b = Math.floor(Math.random() * 255) + 70;
}
// Update coordinates
lastX = currentX;
lastY = currentY;
}
context.clearRect(x, y, w, h)
Clears all pixels on the canvas in the given rectangle to transparent black.
context.fillRect(x, y, w, h)
Paints the given rectangle onto the canvas, using the current fill style.
context.strokeRect(x, y, w, h))
Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
Adds points to the subpath such that the arc described by the circumference of the circle described by the arguments, starting at the given start angle and ending at the given end angle, going in the given direction, is added to the path, connected to the previous point by a straight line. Throws an INDEX_SIZE_ERR exception if the given radius is negative.
context.arcTo(x1, y1, x2, y2, radius)
Adds a point to the current path, connected to the previous one by a straight line, then adds a second point to the current path, connected to the previous one by an arc whose properties are described by the arguments. Throws an INDEX_SIZE_ERR exception if the given radius is negative.
context.quadraticCurveTo(cpx, cpy, x, y)
Adds the given point to the current path, connected to the previous one by a quadratic Bézier curve with the given control point.
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
Adds the given point to the current path, connected to the previous one by a cubic Bézier curve with the given control points.
context.clip()
Further constrains the clipping region to the given path.
context.fillStyle [ = value ]
Returns the current style used for filling shapes. Can be set, to change the fill style. The style can be either a string containing a CSS color, or a CanvasGradient or CanvasPattern object. Invalid values are ignored.
context.strokeStyle [ = value ]
Returns the current style used for stroking shapes. Can be set, to change the stroke style. The style can be either a string containing a CSS color, or a CanvasGradient or CanvasPattern object. Invalid values are ignored.
context.globalAlpha [ = value ]
Returns the current alpha value applied to rendering operations. Can be set, to change the alpha value. Values outside of the range 0.0 .. 1.0 are ignored.
gradient.addColorStop(offset, color)
Adds a color stop with the given color to the gradient at the given offset. 0.0 is the offset at one end of the gradient, 1.0 is the offset at the other end. Throws an INDEX_SIZE_ERR exception if the offset it out of range. Throws a SYNTAX_ERR exception if the color cannot be parsed.
gradient = context.createLinearGradient(x0, y0, x1, y1)
Returns a CanvasGradient object that represents a linear gradient that paints along the line given by the coordinates represented by the arguments. If any of the arguments are not finite numbers, throws a NOT_SUPPORTED_ERR exception.
gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1)
Returns a CanvasGradient object that represents a radial gradient that paints along the cone given by the circles represented by the arguments. If any of the arguments are not finite numbers, throws a NOT_SUPPORTED_ERR exception. If either of the radii are negative throws an INDEX_SIZE_ERR exception.
pattern = context.createPattern(image, repetition)
Returns a CanvasPattern object that uses the given image and repeats in the direction(s) given by the repetition argument. The allowed values for repeat are repeat (both directions), repeat-x (horizontal only), repeat-y (vertical only), and no-repeat (neither). If the repetition argument is empty or null, the value repeat is used. If the first argument isn't an img, canvas, or video element, throws a TYPE_MISMATCH_ERR exception. If the image has no image data, throws an INVALID_STATE_ERR exception. If the second argument isn't one of the allowed values, throws a SYNTAX_ERR exception. If the image isn't yet fully decoded, then the method returns null.
context.lineWidth [ = value ]
Returns the current line width. Can be set, to change the line width. Values that are not finite values greater than zero are ignored.
context.lineCap [ = value ]
Returns the current line cap style. Can be set, to change the line cap style. The possible line cap styles are butt, round, and square. Other values are ignored.
context.lineJoin [ = value ]
Returns the current line join style. Can be set, to change the line join style. The possible line join styles are bevel, round, and miter. Other values are ignored.
context.shadowColor [ = value ]
Returns the current shadow color. Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored.
context.shadowOffsetX [ = value ]
context.shadowOffsetY [ = value ]
Returns the current shadow offset. Can be set, to change the shadow offset. Values that are not finite numbers are ignored.
context.shadowBlur [ = value ]
Returns the current level of blur applied to shadows. Can be set, to change the blur level. Values that are not finite numbers greater than or equal to zero are ignored.
context.font [ = value ]
Returns the current font settings. Can be set, to change the font. The syntax is the same as for the CSS 'font' property; values that cannot be parsed as CSS font values are ignored. Relative keywords and lengths are computed relative to the font of the canvas element.
context.textAlign [ = value ]
Returns the current text alignment settings. Can be set, to change the alignment. The possible values are start, end, left, right, and center. Other values are ignored. The default is start.
context.textBaseline [ = value ]
Returns the current baseline alignment settings. Can be set, to change the baseline alignment. The possible values and their meanings are given below. Other values are ignored. The default is alphabetic.
context.fillText(text, x, y [, maxWidth ] )
context.strokeText(text, x, y [, maxWidth ] )
Fills or strokes (respectively) the given text at the given position. If a maximum width is provided, the text will be scaled to fit that width if necessary.
metrics = context.measureText(text)
Returns a TextMetrics object with the metrics of the given text in the current font.
metrics.width
Returns the advance width of the text that was passed to the measureText() method.
context.drawImage(image, dx, dy)
context.drawImage(image, dx, dy, dw, dh)
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
Draws the given image onto the canvas. If the first argument isn't an img, canvas, or video element, throws a TYPE_MISMATCH_ERR exception. If the image has no image data, throws an INVALID_STATE_ERR exception. If the second argument isn't one of the allowed values, throws a SYNTAX_ERR exception. If the image isn't yet fully decoded, then nothing is drawn.
context.scale(x, y)
Changes the transformation matrix to apply a scaling transformation with the given characteristics.
context.rotate(angle)
Changes the transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians.
context.translate(x, y)
Changes the transformation matrix to apply a translation transformation with the given characteristics.
context.transform(m11, m12, m21, m22, dx, dy)
Changes the transformation matrix to apply the matrix given by the arguments.
context.setTransform(m11, m12, m21, m22, dx, dy)
Changes the transformation matrix to the matrix given by the arguments.