SVG path position on canvas - Javascript Canvas

Javascript examples for Canvas:Path

  1. HOME
  2. Javascript
  3. Canvas
  4. Path

Description

SVG path position on canvas

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.8/fabric.min.js"></script> 
      <style id="compiled-css" type="text/css">

canvas, svg {//from  w w w .j a va  2s .c o  m
   border: 1px dotted magenta;
}


      </style> 
      <script type="text/javascript">
    var VanillaRunOnDomReady = function() {
var canvas = new fabric.StaticCanvas('c');
var path1 = new fabric.Path('M 0 0 L 300 100 L 100 300 z', {originX: 0, originY: 0});
canvas.add(path1);
    }
var alreadyrunflag = 0;
if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", function(){
        alreadyrunflag=1;
        VanillaRunOnDomReady();
    }, false);
else if (document.all && !window.opera) {
    document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
    var contentloadtag = document.getElementById("contentloadtag")
    contentloadtag.onreadystatechange=function(){
        if (this.readyState=="complete"){
            alreadyrunflag=1;
            VanillaRunOnDomReady();
        }
    }
}
window.onload = function(){
  setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}

      </script> 
   </head> 
   <body> 
      <div> 
         <h4>canvas:</h4> 
         <canvas id="c" width="400" height="400"></canvas> 
      </div> 
      <div> 
         <h4>SVG:</h4> 
         <svg width="400" height="400"> 
            <path d="M 0 0 L 300 100 L 100 300 z" /> 
         </svg> 
      </div>  
   </body>
</html>

Related Tutorials