0

I am using SVG file so my image should be very sharp. I copy this code from internet and it works fine. but the result is bleary? I also used local svg file, but the result is not sharp. '''

<!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Slider</title>
        <link rel="stylesheet" href="./css/style.css"  >
        <style media="screen"></style>
        </head>
        <body>
            <canvas id="Slider"  ></canvas> 
         <script>
               var can = document.getElementById('Slider');
               var ctx = can.getContext('2d');
               var img = new Image();
               img.onload = function() {
               ctx.drawImage(img, 0, 0);
               }
               img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";
       
          </script>
          </body>
          </html>

'''

Shujaa
  • 1
  • 1

1 Answers1

0

Yes the SVG itself should be sharp but you are drawing it to a canvas. The canvas then is potentially scaled up causing it to blur the svg that was drawn on it.

This had already been answered better here: Blurry svg in canvas

Faraz
  • 433
  • 3
  • 7