canvas-charts

I just committed my first open source project on GitHub. You check it out here.

Here’s the example client with graphs:

Horizontal Bar Graph

 

Line graph

Advertisements

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