CODEWITHSUNDEEP
htmlsvghtml5-canvascanvg
Abishek
Abishek

Reputation: 11691

SVG stroke width is messy on a html 5 canvas

I am trying to bind an SVG to a canvas. The SVG has a stroke width setup and it seems to be thicker than what it needs to be when bound to the canvas. What could be causing this and how to fix this?

The library that I use to bind svg to the html5 canvas is canvg

The JS fiddle below shows both the SVG and the bound svg on a canvas.

JS Fiddle: http://jsfiddle.net/fYAAf/111/

var image = new Image();
var canvas = document.createElement('canvas');
canvas.width =1090;
canvas.height = 1875;
var context = canvas.getContext('2d');
context.drawSvg(xml, 0, 0);
image.src = canvas.toDataURL();

Upvotes: 0

Views: 318

Answers (1)

Felipe B. Florez
Felipe B. Florez

Reputation: 51

According to the link: http://jsfiddle.net/fYAAf/111/

In the javascript code you are embedding the characteristic of SVG in a type tag (image). The result is something like this: 

<img src="data:image/png;basQAACAnWQXByGjnghZGYT8......characteristic_of_SVG">

So you should try to put all the XML properties within an SVG tag, as it is written in the HTML document in the top of the example of jsFiddle.

In JavaScript something fast would:

var xml = "<svg> (Write here xml properties) <g><text (Write here text properties)><tspan dy="35" x="0">Test</tspan></text></g></svg>";

document.getElementById('container').innerHTML = xml;
<div id="container"></div>

I don't know what the cause of this behavior in img tags.

Upvotes: 1

Related Questions