Canvas Tips and Tricks (JS)

Question

Here we can share some tips and tricks about optimization (or not optimization) in use of the canvas api.

Some useful links:
https://stackoverflow.com/questions/8205828/html5-canvas-performance-and-optimization-tips-tricks-and-coding-best-practices
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

You can find more, just google for "js canvas tips and tricks".

Answer 1

1. Use multiple canvases where possible.
Real example: I made a Breakout game, and in it I had three canvases, for the ball, for the blocks, and for the paddle. There I redraw only that which needs to be redrawn. Perfomance profit.

2. Don't draw simple text using the canvas.
This feature is really very heavy, it's probably the slowest of the entire CanvasRenderingContext2D API. If you need to draw simple text, for example, to show the number of reached score, use HTML for this. Using a benchmark, I learned that .fillText() runs 70 times slower (it was before, now I don't know how it works) than .innerHTML (.textContent / .innerText theoretically work even faster .innerHTML).

3. Use WebGL for mobile platforms.
Real example: my Flappy Bird game was laggy on phones when I used only 2D canvas. I solved this problem using WebGL on phones (except Safari iOS, because there it is for some reason slow), and 2D on PC (I checked this only in Chrome, and there it works terribly slow).

Answer 2

@Blue You're welcome. Hope this will be helpful to you.

Answer 3

Canvas lines are sometimes not crisp and edges appear dull, making it look so bad, so why does it happens and possible solution for it!
http://www.mobtowers.com/html5-canvas-crisp-lines-every-time/

heres a sample code to check the problem and one solution of it
https://code.sololearn.com/WbVJ4Ib47vZF

Answer 4

@Wlad ur welcome

Answer 5

thx for that but this thread is for occasionall resources, tips and tricks for canvas , please no code promotion.

although please include commented codes that are for learning purpose helpful and acts as a proof of concept. ( but it should be minimal)

wats new in canvas API, which stuffs got deprecated, things like how to use touchevents properly etc.

follow this thread for regular posts please, and no pollution too please!😃

Answer 6

Play with canvas arcTo method interactively:
https://code.sololearn.com/Wc9Ez8S0r1TQ/?ref=app

Learn how trig functions relate to x,y on canvas:
https://code.sololearn.com/WRGDef71sx8g/?ref=app

Answer 7

Guide for easy FPS Counters.

https://code.sololearn.com/WJ2800lyY7xx/?ref=app

Thank you Morpheus for the original code.

Here is an insertable object version for easy use:
https://code.sololearn.com/WP1COrKuckUy/?ref=app

And an embeddable version by Morpheus
https://code.sololearn.com/WfvIhOJ9xR0E/?ref=appot

Answer 8

Some canvas templates I'm using:
(So you don't have to code everything from scratch every time(Use/edit them however you like))
https://code.sololearn.com/Wd1vMv83EqkF/?ref=app
https://code.sololearn.com/Wc5JyXEQUAay/?ref=app
https://code.sololearn.com/WJcjnGcCVxCT/?ref=app

Answer 9

Haris yes yours is simpler,mine too uses Pythagoras,never knew Math.hypot() was a thing😂,I'll have to visit that Math library some day

Answer 10

see using . innerHTML produces flaws,but since the effects of how slow fillltext is aren't really obvious I might continue with using it

Answer 11

2 ways of setting dimensions in canvas and how they affect the looks, an awesome explanatory code by Kirk schafer

that's y we resize the canvas after defining it
i.e example
canvas.width = 400 ;
canvas.height = 600;

https://code.sololearn.com/WETCkRaPNVhy/?ref=app

Answer 12

Well I personally am a big canvas fan and Harris statement is one mistake most beginners seem to make.Using setInterval() instead of requestAnimationFrame();
Each device has its own FPS rate and using setInterval might not make the frame sync with the device frame therefore you have lags,glitches and other terrible things.

Answer 13

For those interested in canvas games I believe three things are very important:
#1learn how to use trigonometrical functions.
sin and cos importantly.but I've had to use tan in some of my codes too.
#2learn how to find the angle between two objects positioned on your canvas
mx=a-c;
my=b-d; angle=Math.atan2(mx,my)
#3finding the distance between two points
mx=a-c;
my=b-d;
dist=(mx*mx+my*my);
where a,b and c,d are x,y coordinates of the objects.
To be honest these three are the backbone to 90% of my canvas games

Answer 14

one of those canvas codes I feel happy I wrote

https://code.sololearn.com/WegRzh0755ZG/?ref=app

Answer 15

OffScreenCanvas is here and will be provided in experimental support soon

A new interface that allows canvas rendering contexts (2D and WebGL) to be used in workers.
Making canvas rendering contexts available to workers will increase parallelism in web applications, leading to increased performance on multi-core systems.

working : While the canvas animation is driven by requestAnimationFrame() in the main page, the pixels are drawn to the canvas in the web worker using OffscreenCanvas.

https://www.chromestatus.com/feature/5424182347169792

Answer 16

global Composite Operation values can change a lot how our next layer of drawing is applied, mastering it opens a door to new color layering possibilities.

this code makes it easier to test all its 26 possible values , suggestions welcome for more improvement

https://code.sololearn.com/WHtre990XTtu/?ref=app

Answer 17

A example of Parenting canvas objects and their methods.

https://code.sololearn.com/W8DmBeDJtbSU/?ref=app

Answer 18

wasp I use fillltext() alot....wow!!

Answer 19

if some shape is static and not varying then SVG or CSS can be best alternative ( like a background) below the animations,

coz canvas graphics rendering is not crisp like SVG s and CSS , a price to pay for speed
check out a simple comparison of crispness

I m looking for tricks to mk canvas rendering crisp for all shapes, any suggestions

https://code.sololearn.com/WI8NvUTDaLQH/?ref=app

Answer 20

For distance you can also use:
Math.hypot(x2 - x1 , y2 - y1);
It's Pythagorean theorem, and I think it's faster than what 🇳🇬Brains uses.
(Especially designed for distance calculation)
(hypot --> hypotenuse)