3

Why SVG doesn't scale correctly in canvas (it is all pixelated and blurry) ? What am I doing wrong ?

All I want is the SVG image to keep it's aspect ratio whatever the canvas size, and alose not have it becoming blurry.

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

var img = new Image();
img.src = "http://imgh.us/perso.svg";
img.onload = function() {
  ctx.drawImage(img, 0, 0);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
#screen {
  display: block;
  width: 100%;
  height: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <title>Game</title>
</head>

<body>
  <canvas id="screen"></canvas>
  <script type="text/javascript" src="js/game.js"></script>
</body>

</html>
newbStudent
  • 35
  • 1
  • 5
  • 1
    Why are you putting it into a canvas? Once it's in a canvas element, it is rasterized. It's no longer a Scalable **Vector** Graphic, it's pixels. Just place the SVG element into the DOM itself. – zero298 Jun 27 '16 at 19:36
  • 1
    I wanted to make a game using canvas and SVG images. I thought it would still be an SVG... Guess I have to read even more about what canvas really are. Thanks for you clarification ! – newbStudent Jun 27 '16 at 19:50
  • I'm not trying to deter you. If you have a real reason for wanting to use SVG in canvas, then you should add that as a detail in your question. Maybe take a look at [this answer](http://stackoverflow.com/a/3769883/691711) – zero298 Jun 27 '16 at 19:54
  • I wanted to use SVG in canvas so it could easily scale up for any resolution. I guess it's not as easy as I thought it would be. And don't worry, I am not giving up. Will also elaborate more my future questions. – newbStudent Jun 27 '16 at 20:03
  • @newbStudent any update on this? were you able to render a clear image from svg using the solution given below? If yes, what did you do exactly? – software_writer Oct 26 '16 at 23:19

2 Answers2

4

Your problem isn't with the SVG, it's with the canvas.

Canvases have a default size of 300 × 150. The first thing, wich runs is the script, it creates the canvas context, wich is 300 × 150. Then CSS comes, and scales the canvas element to 100% in each direction. The context is still 300 × 150. This makes every pixel take up more than 1 pixel area. You need to make sure your script runs after the CSS or you need to use javascript, to resize the canvas.

Bálint
  • 4,009
  • 2
  • 16
  • 27
  • Thanks for your answer ! I will take a look on how to run js after CSS, or simply go for another solution. – newbStudent Jun 27 '16 at 19:54
  • 1
    @newbStudent If you have the js in a separate file (wich you should have), then simply add a `defer="defer"` property to the script element – Bálint Jun 27 '16 at 19:59
  • @newbStudent, the solution is just to set your canvas `width` and `height` properties. It won't change anything to run the script after the css has loaded if you don't set it. – Kaiido Jun 27 '16 at 23:05
-2

I think you can put the SVG inside a div and then blur the div,so it will get the same effect

https://jsfiddle.net/moongod101/q3qh78xd/

Felix Fong
  • 969
  • 1
  • 8
  • 21