JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.1/fabric.min.js"></script>
<canvas id="svg" width="300" height="150"></canvas>
<img id="img" src='http://titleist.ftsdesign.com/build/assets/images/markyourtitleist/numbers/prov1/9.svg' />
CSS
section {
padding:30px;
line-height:1.5;
}
canvas {
border: 10px solid #fff;
box-shadow: 0 0 1px #999;
}
h2 {
margin-bottom: 0;
}
div + div {
margin-top: 50px;
}
JavaScript
var canvas = document.getElementById('svg');
var context = canvas.getContext('2d');
var image = document.getElementById('img');
console.log(image.width, image.height);
context.drawImage(image, 0, 0, 300, 150);