Canvas and CSS #1

halfempty opened this Issue Sep 28, 2012 · 3 comments


None yet

2 participants


Hey this isn't really an issue, I just wanted to start a discussion...

Watching the video I thought "the resizing of the canvas element could be done with css". I was thinking just

canvas { width: 100%;  height: 100%; }

So I tried it out and... it totally doesn't work! The effects are not what I expected. It's like the canvas thinks its a raster image that has its default shape and has just been stretched. A canvas is very different from a div, I'm gathering.


stack to the rescueeee:

In the third answer:
"Note that you should never, ever use CSS to define your width and height because you will be scaling the canvas instead of resizing it, causing blurriness and a loss of proportion."

Good to know. I think i had just seen it done that way (using js to set w & h) in a createjs example and figured Skinner and the gang knew what they were doing and followed their lead. But was surprised by your findings once you brought it up.

I've been thinking about retina res & canvas, wondering how that works, or doesn't, & maybe this piece of info is the key in how to approach it.. something like:

// css
#canvas {
   width: 300px;
   height: 300px;

var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;

Just a brainfart.. should check it out to see if it would work. But then there's the fact that canvas is pushing around 4 times the amount of pixels.. I'm sure the processors would looove that : ) I can hear my mpb fan whirring from the future.

--- just checked and found this:


Marty.. is it cool if I close this issue? Since it's more of a chat, maybe the wiki's the place for it? I'm a bit of a github noob and still finding my way around this stuff.

@halfempty halfempty closed this Sep 28, 2012


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment