EN
JavaScript - draw svg on canvas element
0 points
In this article, we would like to show you how to draw SVG image on an HTML canvas element using JavaScript.
Quick solution:
xxxxxxxxxx1
var canvas = document.querySelector('#my-canvas');2
var context = canvas.getContext('2d');3
4
var image = new Image();5
6
image.onload = function() {7
// drawImage(image, xStart, yStart, imageWidth, imageHeight)8
context.drawImage(image, 50, 50, 100, 100); 9
};10
11
image.src = 'https://dirask.com/static/bucket/1632934722_loupe.svg';
In this example, we create a new Image with src set to the path to our svg graphics. Then using drawImage() method we draw the svg on the canvas.
Note:
Add
drawImage()method toonloadevent to make sure that the graphic will load correctly.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<canvas id="my-canvas" width="200" height="200"></canvas>12
<script>13
14
var canvas = document.querySelector('#my-canvas');15
var context = canvas.getContext('2d');16
17
var image = new Image();18
19
image.onload = function() {20
context.drawImage(image, 50, 50, 100, 100); // drawImage(image, x-start, y-start, width, height) 21
};22
23
image.onerror = function() {24
context.fillStyle = 'red';25
context.font = '16px Arial';26
context.fillText('Image loading error!', 10, 30);27
};28
29
image.src = 'https://dirask.com/static/bucket/1632934722_loupe.svg';30
31
</script>32
</body>33
</html>