How to add dynamic effects to your canvas elements?

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…

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

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

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…

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…

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

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…

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