javascript - Canvas generated by canvg is blurry on retina screen -
i'm using raphael draw object, transferring html canvas element canvg can utilize todataurl save png. when utilize canvg, resulting image blurry. code below, example, produces (raphael on top, canvg on bottom):
<html> <head> <script src="lib/raphael-min.js"></script> <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/stackblur.js"></script> <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> <script src="lib/raphael.export.js"></script> </head> <body> <div id="raph_canvas"></div><br> <canvas id="html_canvas" width="50px" height="50px"></canvas> <script language="javascript"> var test=raphael("raph_canvas",50,50); var rect=test.rect(0,0,50,50); rect.attr({fill: '#fff000', 'fill-opacity':1, 'stroke-width':1}) window.onload = function() { var canvas_svg = test.tosvg(); canvg('html_canvas',canvas_svg); var canvas_html = document.getelementbyid("html_canvas"); } </script> </body> </html> the blurriness evident in png created todataurl well. thought going on here? don't think has re-sizing. i've tried setting ignoredimensions: true , other things.
another datapoint. if utilize raphael output text , utilize canvg, not blurry wrong font!
and here test.rect(0.5,0.5,50,50) suggested. still blurry:
so took me while, dawned on me. illustration images twice size code claims should be. you're on sort of hdpi device (retina macbook pro ect...) svg great because resolution independent, canvas on other hand not. issue you're seeing has how canvas renders. prepare this, need prep canvas drawing done @ resolution of screen.
http://jsbin.com/liquxiyi/3/edit?html,js,output
this jsbin illustration should great on screen.
the trick:
var cv = document.getelementbyid('box'); var ctx = cv.getcontext("2d"); // svg resolution independent. canvas not. need create our canvas // high resolution. // lets resolution of our device. var pixelratio = window.devicepixelratio || 1; // lets scale canvas , alter css width/height create high res. cv.style.width = cv.width +'px'; cv.style.height = cv.height +'px'; cv.width *= pixelratio; cv.height *= pixelratio; // high res need compensate our images can drawn //normal, scaling pixelratio. ctx.settransform(pixelratio,0,0,pixelratio,0,0); // lets draw box // or in case parsed svg ctx.strokerect(20.5,20.5,80,80); // lets convert dataurl var ur = cv.todataurl(); // result should canvas when using png (default) var result = document.getelementbyid('result'); result.src=ur; // need our image match resolution of canvas result.style.width = cv.style.width; result.style.height = cv.style.height; this should explain issue you're having, , point in direction prepare it.
javascript canvas svg raphael canvg
No comments:
Post a Comment