CODEWITHSUNDEEP
javascriptcssperformancecanvashtml5-canvas
Aaa
Aaa

Reputation: 910

Is canvas scaling more performant via CSS or JS?

The following document mentions some guidelines for performant scaling of HTML5 Canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#Scaling_canvas_using_CSS_transforms

CSS transforms are faster by using the GPU. Best case is to not scale the canvas or have a smaller canvas and scale up rather than a bigger canvas and scale down. For Firefox OS, target 480 x 320 px.

This is unclear. Should I make the canvas as small as possible, then scale with CSS, or set the larger canvas dimensions from the canvas.width and canvas.height attributes (and "not scale the canvas" at all?)

Upvotes: 3

Views: 2509

Answers (3)

Tim Krief
Tim Krief

Reputation: 384

By scaling in CSS you don't change your canvas "computed" size, which means, by scaling up, you'll lose displayed quality.

If you have to scale with CSS, try with JS to scale the actual size of the canvas to match, pixel per pixel, on user's screen.

Upvotes: 2

user1693593
user1693593

Reputation:

This is unclear. Should I make the canvas as small as possible, then scale with CSS, or set the larger canvas dimensions from the canvas.width and canvas.height attributes (and "not scale the canvas" at all?)

Yes and no, it means scaling an element (canvas or any other) is faster using transforms (ie. transformation matrix) than using CSS width and height on the element, as transforms uses the available GPU. Plus:

Everything goes through transform matrices anyways (unless optimized not to when a identity matrix is encountered). Layout properties such as width and height etc. triggers layout reflow. Transforms can usually skip to paint and composition.

Example: As you can see here, the second div has transforms applied but does nothing to layout (the ghost space for the div is still there):

div {
  width:100px;padding:100px 0 0 0;margin:0 5px;
  display:inline-block;background:#7f9;border:2px solid #000
  }

div:nth-child(2) {
  transform:scale(1.5) translate(30px, 30px)
}
<div></div><div></div><div></div><div></div>

In case of canvas there is an additional advantage from performance and memory side of things when you scale a smaller one up to fit the client window (or parent element) than using a larger one and scale down as in the latter case will produce data you will anyways discard parts of (and at non-linear scale).

The idea is to target a device:size that you suspect your users will use such as a cell phone. If screen is 1:1 as targeted then A-OK. If the user has a larger screen then it's better to scale up than to target a large screen size and risk that most/many users have to scale down wasting precious (?) resources.

Some will say that when scaling up you loose quality. True, but consider the scenario. If you have a lot of action going on in the canvas most won't notice.

From a quality perspective however, the opposite may be beneficial as you can re-sample existing data instead of synthesizing it. This is useful for when say processing large images as end result, but you need to preview them at a smaller size.

But since the topic is about performance then keeping 1:1 or scaling up via (CSS) transforms is a better choice. If you notice the difference depends on your code, computer and what you try to accomplish with it.

Upvotes: 2

jhpratt
jhpratt

Reputation: 7120

Assuming you're not doing anything crazy, just set it to be the size you need. The performance difference will be negligible.

Upvotes: 2

Related Questions