How to show multiple external svg graphics in a html5 canvas

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. :)

Answers:

Answer

[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>
Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.