How to show multiple external svg graphics in a html5 canvas

Question

How to show multiple external svg graphics in a html5 canvas

2.1k views Asked by direndd At 23 October 2024 at 07:31

I have created a html 5 canvas and added some shapes using ctx.fillRect(X,Y,W,H); and some other javascript functions.

Now i want to add a svg graphic in multiple places of that canvas.

The reason i want to use a svg is the sharpness & quality of the image. I tried using drawImage method in HTML5 but the image i want to draw is doesn't give a very quality output when it's added to the canvas using drawImage method.No matter how high resolution image i use it makes a very low quality image.

But i think using a svg graphic is the solution.

This is the code i used,

    <canvas id="myCanvas" style="border: 2px solid #000000; width: 1280px; height: 800px;"></canvas> 
<img id="location" src="location.png" alt="The Scream" width="25.5" height="41.5">
<script >   
                var c = document.getElementById("myCanvas"); 
        var ctx = c.getContext("2d"); 

                ctx.fillRect(4,4, 12,10);
        ctx.fillStyle=fontBlack;        
        ctx.fillText("1",8,10);     
        ctx.fillRect(5,16, 7, 16);
        ctx.fillRect(5,33, 7, 28);
        ctx.fillRect(5,62, 7, 50);
        ctx.fillRect(5,113, 7, 15);
        ctx.fillRect(5,129, 7, 15);

//I have a list of coordinates in a javascript object list called selectedShelfList, I'm getting the necessary coordinates from that.

function drawLocations(){ 

            for (var i=0; i<selectedShelfList.length; i++)
            {

                var x_coordinate = selectedShelfList[i].shelf_x;
                var y_coordinate = selectedShelfList[i].shelf_y;


                var img=document.getElementById("location");
                ctx.drawImage(img,x_coordinate,y_coordinate,8.5,13.8);

                //Instead of drawImage method i want to use a code to show a svg graphic here
            }
        } 
</script >

As solutions i found on stackoverflow for this problem, I tried using canvg.js as mentioned in the previous similar questions but it wasn't clear. for example:

var ctx = document.getElementById('test').getContext('2d');
ctx.drawSvg('<svg><rect x="0" y="0" width="100" height="200" fill="red" /></svg>', 0 , 0 , 500, 500);

How shoul i give the url for external svg in this command? Can i use the url in between the '' as the parameter for drawSvg ? Eg: ctx.drawSvg('location.svg', 0 , 0 , 500, 500);

Is there any way i can show a svg graphic inside a canvas? Can canvg do the trick? If so how exactly?

Please help me on this. :)

Original Q&A

There are 2 answers

direndd On 20 August 2013 at 16:38

Using the canvg worked!

var ctx = document.getElementById('test').getContext('2d');
ctx.drawSvg('location.svg', 0 , 0 , 100, 100);

using above code worked. Earlier I haven't add the javascript files into the html file properly.

Adding them to local folder worked

<script type="text/javascript" src="rgbcolor.js"></script> 
<script type="text/javascript" src="StackBlur.js"></script>
<script type="text/javascript" src="canvg.js"></script>

Still the image quality is not that much but it's better than using an image with drawImage method.

**markE** · Accepted Answer · 2013-08-20 21:31:51

[Edited: include example of very small map pin]

Rendering a circle in a small 10 pixel boundary will always result in pixilation.

There's just too few pixels to "round" an edge.

Here's an example of a more square map pin that is far less pixelated:

enter image description here

You can produce this map pin in canvas code like this:

ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(110,100);
ctx.lineTo(110,107);
ctx.lineTo(105,115);
ctx.lineTo(100,107);
ctx.lineTo(100,100);
ctx.closePath();
ctx.fillStyle="gold";
ctx.fill();
ctx.strokeStyle="black";
ctx.lineWidth=2;
ctx.stroke();

[Original answer]

SVG scales well since it is vector drawn.

You should be able to do this and get a high quality result:

Download this test image:

https://dl.dropboxusercontent.com/u/139992952/stackoverflow/rocket.svg

Then this code will scale the svg rocket while maintaining quality:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var size=100;

    var svg1=new Image();
    svg1.width=150;
    svg1.onload=function(){
        ctx.drawImage(svg1,0,0,size,size);
    }
    svg1.src="rocket.svg";

    $("#bigger").click(function(){ 
        size+=100; 
        ctx.drawImage(svg1,0,0,size,size);
    });

}); // end $(function(){});
</script>

</head>

<body>
    <button id="bigger">Bigger!</button><br>
    <canvas id="canvas" width=900 height=900></canvas>
</body>
</html>

TechQA.

How to show multiple external svg graphics in a html5 canvas

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in SVG

Related Questions in HTML5-CANVAS

Related Questions in CANVG

Popular Questions

Popular Tags

Trending Questions