Table of contents
html5 canvas
hello world
<html>
<style>
canvas {
background: grey;
}
</style>
<canvas></canvas>
</html>
access canvas from javascript
<script>
canvas = document.querySelector('canvas');
</script>
maximize canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawing
get drawing context
var c = canvas.getContext('2d');
clear the canvas
c.clearRect(0, 0, canvas.width, canvas.height);
get size of canvas in pixels
var width = Math.round(window.devicePixelRatio * canvas.width);
var height = Math.round(window.devicePixelRatio * canvas.height);
device pixel discussion
https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
text
write text (filled)
c.fillStyle = "blue";
c.fillText(new Date(), 10, 20);
no fill
c.strokeStyle = "blue";
c.strokeText(new Date(), 10, 20);
change font (using css font string)
c.font = "10px Courier";
c.font = "20px Arial";
c.font = "30px Comic Sans MS";
write some text and add a line of the same length as the text above and below
c.font = "20px Arial";
var text = "" + new Date();
var calc = c.measureText(text);
console.log(calc);
c.moveTo(0, 10);
c.lineTo(calc.width, 10);
c.stroke();
c.fillText(text, 0, 30);
c.moveTo(0, 40);
c.lineTo(calc.width, 40);
c.stroke();
shapes
draw a line
c.beginPath();
c.moveTo(x1, y1);
c.lineTo(x2, y2);
c.lineWidth = 10;
c.strokeStyle = "blue";
c.stroke();
extend a line
c.moveTo(x1, y1);
c.lineTo(x2, y2);
c.lineTo(x3, y3);
draw complete a line path and fill the contents
c.moveTo(100, 200);
c.lineTo(300, 200);
c.lineTo(200, 100);
c.fillStyle = "green";
c.fill();
c.strokeStyle = "black";
c.stroke();
draw just the outline of a line path
c.moveTo(100, 200);
c.lineTo(300, 200);
c.lineTo(200, 100);
c.closePath();
c.strokeStyle = "black";
c.stroke();
draw a rectangle
c.strokeStyle = "blue"
c.strokeRect(x, y, w, h)
fill a rectangle
c.fillStyle = "blue"
c.fillRect(x, y, w, h)
draw an arc (circle)
angle1 = 0;
angle2 = 2 * Math.PI;
c.beginPath();
c.arc(x, y, radius, angle1, angle2)
c.strokeStyle = 'yellow';
c.stroke();
counter clockwise
counterclockwise = true;
c.arc(x, y, radius, angle1, angle2, counterclockwise)
styles
defining a fill style
c.fillStyle = "blue" # color name
c.fillStyle = "#00F" # hex color
c.fillStyle = 'rgba(0, 0, 255)' # without alpha
c.fillStyle = 'rgba(0, 0, 255, 0.5)' # with alpha
shadow
shadow properties
c.shadowColor = "yellow";
c.shadowOffsetX = 20;
c.shadowOffsetY = 20;
shadowBlur is the distance over which the shadow extends outward from the path
c.shadowBlur = 20;
add shadow around box (glowing box)
c.shadowBlur = 20;
c.shadowColor = "yellow";
c.fillStyle = "red";
c.fillRect(100, 100, 100, 100);
disable shadow
c.shadowBlur = 0;
gradients
arguments of createLinearGradient
createLinearGradient(x0, y0, x1, y1)
x0 x-coordinate (relative to canvas) of the start point of gradient
y0 y-coordinate (relative to canvas) of the start point of gradient
x1 x-coordinate (relative to canvas) of the end point of gradient
y1 y-coordinate (relative to canvas) of the end point of gradient
creating a linear gradient
var gradient = c.createLinearGradient(x, y, x, y+h);
gradient.addColorStop(0, "#060");
gradient.addColorStop(1, "#0B0");
c.fillStyle = gradient;
c.fillRect(x, y, w, h);
multistep gradient
var gradient = c.createLinearGradient(x, y, x, y+h);
gradient.addColorStop(0, "#060");
gradient.addColorStop(0.5, "#0B0");
gradient.addColorStop(1, "#000");
horizontal gradient
c.createLinearGradient(x, y, x, y+h);
vertical gradient
c.createLinearGradient(x, y, x+w, y);
images
draw an image
var img = new Image();
img.src = "//vignette2.wikia.nocookie.net/tomandjerryfan/images/9/99/Jerry_Mouse.jpg/revision/latest?c
c.drawImage(img, x, y, w, h);
transformations
draw with a translation relative to the origin
c.fillRect(100, 10, 100, 20);
c.translate(100, 100);
c.fillRect(100, 10, 100, 20);
draw with a rotation of 45 degrees relative to the origin
c.fillRect(100, 0, 100, 20);
c.rotate(45/180 * Math.PI);
c.fillRect(100, 0, 100, 20);
translate and rotate
c.fillRect(100, 10, 100, 20);
c.translate(100, 100);
c.rotate(45/180 * Math.PI);
c.fillRect(100, 10, 100, 20);
animation
animation example
function animation() {
requestAnimationFrame(animation);
c.clearRect(0, 0, canvas.width, canvas.height);
c.fillStyle = "blue";
c.fillRect(x, y, w, h);
x += dx;
if (x + w >= canvas.width) {
dx = -speed;
}
if (x <= 0) {
dx = speed;
}
}
animation();
events
following the mouse
canvas.addEventListener('mousemove', function(event) {
c.clearRect(0, 0, canvas.width, canvas.height);
c.fillText("x = " + event.x + "; y = " + event.y, 10, 20);
});
save & restore stack
save current transformation matrix, clipping region and color settings
c.save()
pop stack
c.restore()
references
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
https://www.html5canvastutorials.com/tutorials/html5-canvas-element/