Canvas Tips and Tricks (JS) | SoloLearn: Learn to code for FREE!

+40

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

2/27/2018 12:28:07 PM

Vladislav Tikhiy (SILENT)

40 Answers

New Answer

+28

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

+16

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

+14

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

+12

@Wlad ur welcome

+10

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

+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

+8

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

+7

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

+7

not really a tip or trick, but cool little cheat sheet i found http://cheatsheetworld.com/programming/html5-canvas-cheat-sheet/

+6

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

+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

+6

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

+6

A example of Parenting canvas objects and their methods. https://code.sololearn.com/W8DmBeDJtbSU/?ref=app

+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

+5

Requested by Morpheus, To make a trailing effect while drawing on the canvas, you paint the entire canvas (viewport) using transparency. so ctx.fillStyle="rgba(0,0,0,0.04)"; ctx.fillRect(0, 0, cnv.width, cnv.height); Note: This must be in a loop and draw before other elements. Using the clearRect method removes the trailing effect Hope this is useful! Tried to be as minimalistic and detailed as possible! REPOST BECAUSE I COULDNT INSERT CODE WHILE EDITING MY OLD POST https://code.sololearn.com/WZu63CEetm9x/?ref=app https://code.sololearn.com/WP10vqB7E2FB/?ref=app

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

+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

+5

one of those canvas codes I feel happy I wrote https://code.sololearn.com/WegRzh0755ZG/?ref=app

+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

+5

Here's something to make your physics engines a bit easier. https://code.sololearn.com/WnryfhGDQQGt/?ref=app https://code.sololearn.com/WAF7H6iNsuX0/?ref=app