+ 42

Canvas Tips and Tricks (JS)

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

27th Feb 2018, 12:28 PM
Vladislav Tikhiy (SILENT)
Vladislav Tikhiy (SILENT) - avatar
36 odpowiedzi
+ 27
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).
27th Feb 2018, 12:33 PM
Vladislav Tikhiy (SILENT)
Vladislav Tikhiy (SILENT) - avatar
+ 16
@Blue You're welcome. Hope this will be helpful to you.
28th Feb 2018, 8:49 AM
Vladislav Tikhiy (SILENT)
Vladislav Tikhiy (SILENT) - avatar
+ 15
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
28th Feb 2018, 11:43 PM
Morpheus
Morpheus - avatar
+ 12
@Wlad ur welcome
1st Mar 2018, 6:17 PM
Vladislav Tikhiy (SILENT)
Vladislav Tikhiy (SILENT) - avatar
+ 9
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!😃
27th Feb 2018, 1:13 PM
Morpheus
Morpheus - avatar
+ 9
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
7th Mar 2018, 7:35 AM
Michael Simnitt
Michael Simnitt - avatar
+ 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
28th Mar 2018, 11:13 AM
Michael Simnitt
Michael Simnitt - avatar
+ 6
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
28th Mar 2018, 8:14 PM
Haris
Haris - avatar
+ 6
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
29th Mar 2018, 6:39 AM
᠌᠌Code X
᠌᠌Code X - avatar
+ 5
see using . innerHTML produces flaws,but since the effects of how slow fillltext is aren't really obvious I might continue with using it
5th Mar 2018, 7:18 PM
᠌᠌Code X
᠌᠌Code X - avatar
+ 5
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
7th Mar 2018, 3:32 AM
Morpheus
Morpheus - avatar
+ 5
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.
29th Mar 2018, 6:24 AM
᠌᠌Code X
᠌᠌Code X - avatar
+ 5
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
29th Mar 2018, 6:29 AM
᠌᠌Code X
᠌᠌Code X - avatar
+ 5
one of those canvas codes I feel happy I wrote https://code.sololearn.com/WegRzh0755ZG/?ref=app
2nd Apr 2018, 9:23 PM
᠌᠌Code X
᠌᠌Code X - avatar
+ 5
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
4th Apr 2018, 9:19 AM
Morpheus
Morpheus - avatar
+ 5
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
5th Apr 2018, 3:36 PM
Morpheus
Morpheus - avatar
+ 5
A example of Parenting canvas objects and their methods. https://code.sololearn.com/W8DmBeDJtbSU/?ref=app
8th Apr 2018, 6:47 AM
Michael Simnitt
Michael Simnitt - avatar
+ 4
wasp I use fillltext() alot....wow!!
5th Mar 2018, 7:10 PM
᠌᠌Code X
᠌᠌Code X - avatar
+ 4
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
13th Mar 2018, 2:58 PM
Morpheus
Morpheus - avatar
+ 4
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)
29th Mar 2018, 6:31 AM
Haris
Haris - avatar