Optimizing HTML5 canvas drawing for high density screen

 //set the canvas size

canvasEl.style.width = this.containerWidth + “px”;

canvasEl.style.height = this.containerHeight + “px”;

// scale 2x

if(window.devicePixelRatio == 2) {

//set the actual drawing size

canvasEl.width = this.containerWidth * 2;

canvasEl.height = this.containerHeight * 2;

context.scale(2, 2);

}

On a side note, for PNGs you would do it with CSS3 media query: 

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max–moz-device-pixel-ratio: 2) {

.your_class_name_here{

background: url(‘path_to_your_image_with_326ppi_here.png’);

width: 150px; //this is the size you actually want to scale it down to.

height: 150px; //this is the size you actually want to scale it down to.

}

}

More related articles:

http://menacingcloud.com/?c=highPixelDensityDisplays

http://blog.iwalt.com/2010/08/generating-highresolution-graphics-with-html5s-canvas-element.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s