How to draw a SVG on Canvas using Javascript?

Question

How Can I draw this svg on a Canvas using Javascript (Without using Dom) ?

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg>

Note: Answers in post this and this Only give a solution when you have an external SVG. My requirement is to draw multiple svgs on Canvas (or anything else) with variable x,y, radius and color

@TemaniAfif this is not an SVG I want to draw SVG so that On zoom it does not pixelate. this will pixelate on zoom — dota2pro, Aug 14 '19 at 21:24
from what I know this not the pupose of canvas. SVG is made for scalable vector and canvas is made for bitmap and pixel by pixel rendring. (https://www.educba.com/svg-vs-canvas/). Even if you draw the content of an SVG inside a canvas you will still have issue with zomming — Temani Afif, Aug 14 '19 at 21:27
from the link above : *SVG does not depend on the resolution, means it is resolution independent. If we enlarge the image, it will not lose its shape. Canvas is resolution dependent. If the image is enlarged, it will start reflecting the pixels of the image.* — Temani Afif, Aug 14 '19 at 21:28
@TemaniAfif is there an alternative for that ? how can I make a scalable canvas like thing using javascript I need to pass x,y dynamically to it — dota2pro, Aug 14 '19 at 21:36
You clearly don't need canvas. What you need is SVG. I guess you have to re-think your choices because you are trying to do things with the wrong tool. — Temani Afif, Aug 14 '19 at 21:38
Why i was using canvas was because you just pass x y and stroke multiple shapes is the same possible on svg too using javascript ? — dota2pro, Aug 14 '19 at 21:39
Yes possible, simply take the time to read more about SVG because you can also place element using coordinates — Temani Afif, Aug 14 '19 at 21:40

Kamil Kiełczewski · Accepted Answer · 2019-08-14T21:43:20.233

2

Try to use image to draw (so snippet not works - but when you edit it - it works)

let xml = new XMLSerializer().serializeToString(circSvg);   // get svg data
let svg64 = btoa(xml);                         // make it base64
let b64Start = 'data:image/svg+xml;base64,';
let image64 = b64Start + svg64;                // prepend a "header"

circImg.src = image64;                         // image source
circImg.onload = x=> {
  can.getContext('2d').drawImage(circImg, 0, 0); // draw
}

svg<br>
<svg id="circSvg" width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg> 

<br>canvas<br> <canvas id="can"></canvas>

<img id="circImg" style="display:none">

edited Aug 14 '19 at 21:43

answered Aug 14 '19 at 21:26

Kamil Kiełczewski

85,173
29
368
345

I see an empty canvas (using Chrome) – Temani Afif Aug 14 '19 at 21:29
try now (i use setTimeout to wait some time...) – Kamil Kiełczewski Aug 14 '19 at 21:31
still nothing .. – Temani Afif Aug 14 '19 at 21:32
I add jsfiddle - in SO snippets doesnt works... strange – Kamil Kiełczewski Aug 14 '19 at 21:33
2

@KamilKiełczewski you've forgotten to wait for the image onload event. it's random whether it works or not – Robert Longson Aug 14 '19 at 21:36
Yes it works randomly and stops working randomly weird – dota2pro Aug 14 '19 at 21:38
@RobertLongson yes - you are right - fixed – Kamil Kiełczewski Aug 14 '19 at 21:38
1

@dota2pro it convert binary string to ascii string - more info [here](https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding) – Kamil Kiełczewski Aug 14 '19 at 21:42
Thanks for the answer but is it possible to draw SVG without using a HTML Dom element, I want to draw SVGs in for loop and having them already in DOM is not possible for me `let xml = new XMLSerializer().serializeToString(circSvg);` – dota2pro Aug 14 '19 at 21:50
you can create xml-s for each svg (you can grab svg from DOM by proper querySelector) and draw them on single canvas – Kamil Kiełczewski Aug 14 '19 at 21:51
in above case if there is no svg in HTML what do replace `circSvg` with in Javascript ? So without svg in DOM it isnt possible ? – dota2pro Aug 14 '19 at 21:53
1

you can use `let svgArr = [...document.querySelector('svg')]` to grab array of svg-s and iterate over it - if you don't have svg in dom - then this array will be empty - so any loop iteration will be executed and your canvas will be empty – Kamil Kiełczewski Aug 14 '19 at 21:55
@KamilKiełczewski can u please explain how to get svg data from canva. i have canva in which i have loaded svg its displaying svg but am unable to get svg to do operations on it , i tried `var groupElement = document.querySelector('#canvas');var bboxGroup = groupElement.getBBox();console.log(bboxGroup);` – user889030 May 20 '21 at 13:28
@user889030 as far I know, there is no build function to convert canvas raster data to svg vector graphic. However maybe you find some library which allows to do that – Kamil Kiełczewski May 20 '21 at 16:22

How to draw a SVG on Canvas using Javascript?

1 Answers1