Question

How to use CanvasPattern.setTransform() to transform matrix and invokes it on SVGMatrix pattern in JavaScript

Answer 1

<canvas id="canvas"></canvas>
<svg id="svg"></svg>

<script type="text/JavaScript">   

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

var svg = document.getElementById("svg");
var matrix = svg.createSVGMatrix();

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';

img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  pattern.setTransform(matrix.rotate(-45).scale(1.7));
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 500, 500);
};
 
/*
run:  
    
   
*/
 
</script>

 

70+ SQL courses for beginners and professionals