draw SVG image into CanvasRenderingContext2D

Question

Is it possible to do something like this

var image = new Image();
image.src = 'img.svg';
context.drawImage(image, x, y); // context is an instance of CanvasRenderingContext2D

with a SVG image? Actually this code works, but I think the image is converted to .jpg or similar, because if I try to zoom the browser page the image becomes coarse.

Clarification : The image should be re-drawn many times in the canvas context (i.e. for movements), so suggestions like "use this library" should consider this fact.

EDIT

From previous discussions, the issue seems to be due to canvas properties (canvas is not browser-zoomable) and not due to incorrect loading. Can I get and modify (eventually) this property of canvas to realize my purpose? I have to draw necessarily on canvas, no other options unfortunately.

Canvas is a pixel based renderer and will not re-render or resize when zoomed in contrary to a regular vectoral image. You should manually scale and re-render the svg IMO. — Ali Naci Erdem, Jan 26 '15 at 12:24
Do you want the canvas to be browser-zoomable or a zoom feature in your application? — Ali Naci Erdem, Jan 26 '15 at 12:43
@AliNaciErdem I simply want to have a SVG image rather than JPEG or PNG, thus my image should be scalable if I zoom my browser page. To answer your question, yes, I want the canvas to be browser-zoomable. — Fabrizio Morello, Jan 26 '15 at 13:09
Then, it is not possible with a canvas. The only option is trying to get browser-zoom values and manage your canvas size/scaling accordingly. Re-ask your question keeping this in mind. — Ali Naci Erdem, Jan 26 '15 at 13:19
@AliNaciErdem then you're saying that the issue of scaling is not due to incorrect loading of image but is due to canvas properties? — Fabrizio Morello, Jan 26 '15 at 13:39

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

Translate rendered svg according to the wanted zoom level.

How to detect page zoom level in all modern browsers?

explains browser-zoom level detection. And you can use fabricjs for canvas manipulation (http://fabricjs.com/).

edited May 23 '17 at 12:16

Community

1
1

answered Jan 26 '15 at 14:19

Ali Naci Erdem

435
2
12

draw SVG image into CanvasRenderingContext2D

1 Answers1