CODEWITHSUNDEEP
javascriptsvghtml5-canvas
Sapinder Singh
Sapinder Singh

Reputation: 351

unable to load svg on canvas

I have a canvas here. And I'm trying to draw an svg on this but it just doesn't work at all. If I use a png file, it works as it should.

drawPlayer() {
    this.xCord = this.colNum * this.width;
    this.yCord = this.rowNum * this.height;

    let rat = new Image();
    let player = this;
        
    rat.onload = function() {player.ctx.drawImage(rat, player.xCord, player.yCord, 
        player.width, player.height);}
    rat.src = "Lik-Rong-IT.svg";
}

I also tried this way-

<img src="Lik-Rong-IT.svg" id="rat" style="display: none"/>

drawPlayer() {
    this.xCord = this.colNum * this.width;
    this.yCord = this.rowNum * this.height;

    let rat = document.querySelector("#rat");
    let player = this;

    rat.onload = function() {player.ctx.drawImage(rat, player.xCord, player.yCord, 
        player.width, player.height);}
}

But this also doesn't work (not even with png!). I've looked up for any mistake I could find in my code, but with no luck. Please help me find the issue!

link to project- https://codesandbox.io/s/maze-p2pyo

Upvotes: 1

Views: 482

Answers (1)

N3R4ZZuRR0
N3R4ZZuRR0

Reputation: 2422

To draw an SVG on a canvas, one of the methods can be to first convert the inline SVG to Base 64 and then simply draw it on the canvas using drawImage. The only thing here is that the SVG should be inline.

Also, I forked your code and applied these changes and it seems to be working: https://codesandbox.io/s/maze-2wb5d

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const svg = new Image();

var xml = new XMLSerializer().serializeToString(document.querySelector('svg'));

// Convert it to base64
var svgBase64 = btoa(xml);
var imageBase64 = 'data:image/svg+xml;base64,' + svgBase64;

svg.src = imageBase64;

svg.onload = function() {
    ctx.drawImage(svg, 0, 0, 32, 32);
};
svg {
    display: none;
}
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M1,12C1,10.19 2.2,8.66 3.86,8.17C5.29,5.11 8.4,3 12,3C15.6,3 18.71,5.11 20.15,8.17C21.8,8.66 23,10.19 23,12C23,13.81 21.8,15.34 20.15,15.83C18.71,18.89 15.6,21 12,21C8.4,21 5.29,18.89 3.86,15.83C2.2,15.34 1,13.81 1,12M14.5,9.25A1.25,1.25 0 0,0 13.25,10.5A1.25,1.25 0 0,0 14.5,11.75A1.25,1.25 0 0,0 15.75,10.5A1.25,1.25 0 0,0 14.5,9.25M9.5,9.25A1.25,1.25 0 0,0 8.25,10.5A1.25,1.25 0 0,0 9.5,11.75A1.25,1.25 0 0,0 10.75,10.5A1.25,1.25 0 0,0 9.5,9.25M7.5,14C8.26,15.77 10,17 12,17C14,17 15.74,15.77 16.5,14H7.5M3,12C3,12.82 3.5,13.53 4.21,13.84C4.07,13.25 4,12.63 4,12C4,11.37 4.07,10.75 4.21,10.16C3.5,10.47 3,11.18 3,12M21,12C21,11.18 20.5,10.47 19.79,10.16C19.93,10.75 20,11.37 20,12C20,12.63 19.93,13.25 19.79,13.84C20.5,13.53 21,12.82 21,12Z" /></svg>

<canvas />

Upvotes: 1

Related Questions