We ll build this animation

Html

<html lang="en">
<head>
<title>Canvas Animation</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>

<body>
<canvas id="c" width="800" height="600">
This is a message for old browsers
</canvas>

<script src="script.js"></script>
</body>
</html>

Style

#c {
border: 1px solid;
display: block;
width: 800px;
height: 600px;
margin: 0 auto;
}

JavaScript

window.onload = function () {
let canvas = document.getElementById("c");
let context = canvas.getContext("2d");

let start = new Date();

window.requestAnimationFrame(drawRandomColoredRectangle);

function drawRandomColoredRectangle() {
let now = new Date()…


Html

<html lang="en">
<head>
<title>Canvas Keys</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>

<body>
<canvas id="c" width="800" height="600">
This is a message for old browsers
</canvas>

<script src="script.js"></script>
</body>
</html>

Style.css

#c {
border: 1px solid;
display: block;
width: 800px;
height: 600px;
margin: 0 auto;
}

JavaScript & Keydown

window.onload = function () {
let canvas = document.getElementById('c');
let context = canvas.getContext("2d");

window.addEventListener('keydown', function (event) {
console.log(event);
});
}


  • mousedown / mouseup
  • mouseover / mouseout
  • mousemove
  • click
  • dbclick

Html

<html lang="en">
<head>
<title>Canvas Mouse Events</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>

<body>
<canvas id="c" width="800" height="600">
This is a message for old browsers
</canvas>

<script src="script.js"></script>
</body>
</html>

Style.css

#c {
border: 1px solid;
display: block;
width: 800px;
height: 600px;
margin: 0 auto;
}

Script.js

Mouse up & Mouse down

window.onload = function () {
let canvas = document.getElementById('c');
let context = canvas.getContext("2d");

/**
* Mouse Events
* - mousedown…


<html lang="en">
<head>
<title>Canvas Image</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>

<body>
<canvas id="c" width="800" height="600">
This is a message for old browsers
</canvas>

<script src="script.js"></script>
</body>
</html>

Style.css

#c {
border: 1px solid;
display: block;
width: 800px;
height: 600px;
margin: 0 auto;
}

Script.js

drawImage(img, dx, dy);
drawImage(img, dx, dy, dw, dh);
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);


<html lang="en">
<head>
<title>Canvas Text</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>

<body>
<canvas id="c" width="800" height="600">
This is a message for old browsers
</canvas>

<script src="script.js"></script>
</body>
</html>
#c {
border: 1px solid;
display: block;
width: 800px;
height: 600px;
margin: 0 auto;
}

Canvas Text

context.fillText("Lorem ipsum", x, y);
context.strokeText("Lorem ipsum", 10, 200);


<html lang="en">
<head>
<title>Canvas Shadows</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>

<body>
<canvas id="c" width="800" height="600">
This is a message for old browsers
</canvas>

<script src="script.js"></script>
</body>
</html>
#c {
border: 1px solid;
display: block;
width: 800px;
height: 600px;
margin: 0 auto;
}
window.onload = function () {
let canvas = document.getElementById('c');
let context = canvas.getContext("2d")…


Arc

context.arc(x, y, radius, angleFrom, angleTo, false);
window.onload = function () {
let canvas = document.getElementById('pacman');
let context = canvas.getContext("2d");

let radian = Math.PI / 180;

context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 5;
context.arc(250, 250, 100, 0, 360 * radian, false);
context.stroke();
}



Anton Lytvynov

Senior web developer, architect, cryptocurrencies trader, https://lytvynov-anton.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store