Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Canvas and CSS #1

Closed
halfempty opened this Issue · 3 comments

2 participants

@halfempty

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.

@presstube
Owner

stack to the rescueeee:
http://stackoverflow.com/questions/9715526/html5-canvas-does-the-width-height-need-to-be-defined-inline

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;
}

//js
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:

http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and

@presstube
Owner

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
@halfempty

Closed!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.