How to add dynamic effects to your canvas elements?

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()…


How to handle key on your Canvas?

It’s pretty simply to listen to your keys; you listen to the event with the name ‘keydown’ and than you just need to find the right key code.

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);
});
}

So when…


How to handle mouse events on your Canvas?

Possible Mouse Events on Canvas

  • 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…


How to add an image to your canvas?

Prepare our HTML

<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

Possible variants of image drawing

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

You can see the explanation of sx, sy, sw, sh on the image bellow.


How to add some text and style it on my Canvas?

Let’s see what we can do with the text on our canvas.

Html with style.scss and script.js

<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>

Style.css

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

Canvas Text

We can add a simple text to Canvas with two functions

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


How to add shadows to your Canvas Elements?

In this lesson we learn how to add shadows to our lessons.

Our Html code with script.js & style.css

<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>

Styles.css

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

And we start with 4 elements we ll use later

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


Canvas circle primitive and example of what we can do with it

It’s time to learn how to work with circles. But the basic primitives it’s too boring, so we ll create a pacman :)

Arc

Let’s draw our first arc. We can do that with arc function

context.arc(x, y, radius, angleFrom, angleTo, false);

So these lines

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();
}

give us a circle


Best useful services to use for creative creation

Our top 4 sites we use in our work


Google embed iframe

It’s pretty simple to add the Google Maps embed iframe to your site

There are a lot of free Google Maps iframe generators. But pay attention, the most of them add theirs logo to iframe, that’s not cool.

In my case, I used this site.


How to manage your project? What Application to chose? Free sites?

Our top 5 management sites you can start use for free

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