TAG
CSS
JavaScript
Result
Run
License
<canvas id="mycanvas" width="200" height="200"></canvas> <svg id="mysvg"></svg>
canvas { border: 1px solid #CCC; }
window.addEventListener("load", function() { const elCanvas = document.getElementById("mycanvas"); const context = elCanvas.getContext("2d"); const elSvg = document.getElementById("mysvg"); let matrix = elSvg.createSVGMatrix(); const bgImg = new Image(); bgImg.src = "https://resrc.devdic.com/img/bykind/pattern/mosaic.png"; bgImg.onload = function() { const pattern = context.createPattern(bgImg, "repeat"); pattern.setTransform(matrix.rotate(-45).scale(1.5)); context.fillStyle = pattern; context.fillRect(20, 20, 160, 160); }; });
Console
expand_less
License
License
by DevDic
Close