以高分辨率渲染html画布图像

Question

I'm looking to create a system where users create an image in canvas on their browser (with the help of paper.js or processing.js etc) and be able to print a large (up to A3, 300dpi ideally) size representation of what they have created in canvas.

Obviously exporting images straight from the canvas element in the users browser I'm limited to screen size and resolution etc.

So I've looked into the solution of momentarily scaling up the canvas element when the users saves and capturing the image data at the larger size. This could be a solution but I'm pretty sure file size would get out of hand pretty quickly at larger sizes.

I haven't used Node.js very much but was wondering if anyone with experience would know if Node could achieve this and if it would be a better solution and briefly how I'd go about it?

Answer 1

I see two ways to achieve what you want :

• use an oversized canvas, that you scale with css.
  For instance, you can have a 1000X1000 canvas, that you show within a 200pxX200px smaller view.

   <canvas width=1000 height=1000 style = 'width:200px; height:200px;' id='cv'> </canvas> 

• use a small canvas for display on screen, and really draw on a backing canvas, that you reproduce on the view canvas at each change.

Both solution cannot solve the issue that mouse coordinates are integer, so to implement a 'pixel perfect' location of object you'll have to implement some kind of zooming. Second solution might be simpler for this.

To retrieve the mouse coordinates, with css scaling do not forget to multiply them by the scale, and in case 2, by the scale you decided.

// formula to get the css scale :
var cssScaleX = canvas.width / canvas.offsetWidth;  
var cssScaleY = canvas.height / canvas.offsetHeight;
// then mouse coords are to be multiplied by the scale : 
//                                       mouse.x *= cssScaleX;

I tried quickly both solutions, and i was quite surprised to see that css solution is very slow (in both Ch and FF), and it seems faster to copy a back canvas than to have css doing it. Maybe it depends on some quality settings, but it seems solution 2 is both more flexible and faster.

first css version is here (move mouse to draw 10X10 rect) :

http://jsbin.com/kegohufu/1/

second back canvas + copy version is here (move mouse to draw 10X10 rect) :

http://jsbin.com/qomiqoqi/1/