1

How can I rotate canvas line pattern, drawn on HTML canvas?

var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");

var canvasPattern = document.createElement("canvas");
canvasPattern.width = 10;
canvasPattern.height = 20;
var contextPattern = canvasPattern.getContext("2d");

contextPattern.fillStyle = 'red';
contextPattern.fillRect(0, 0, 20, 10);
//contextPattern.rotate(130);

https://jsfiddle.net/nt6ae1Ld/18/

Working example: https://jsfiddle.net/qb72o9sp/3/

Tadej
  • 298
  • 3
  • 15
  • Make sure you move the origin to the rotation point with `context.translate`. Here's a previous [Q&A](http://stackoverflow.com/questions/17411991/html5-canvas-rotate-image/17412387#17412387) showing how to rotate around a point. – markE Sep 16 '16 at 22:12
  • Doesn't work: https://jsfiddle.net/nt6ae1Ld/21/ – Tadej Sep 17 '16 at 08:53
  • 1
    The technique [works](https://jsfiddle.net/qb72o9sp/) fine for me. Just adapt it to your own design needs. :-) – markE Sep 17 '16 at 13:46
  • Thx markE. It works! Updated jsfiddle: https://jsfiddle.net/qb72o9sp/3/ – Tadej Sep 18 '16 at 13:32

1 Answers1

0

i have already rotated the canvas by 60 degree but if your requirement is rotating 130 degree u need to keep in mind that the rotation >=90 degree makes the object perpendicular to the plane thus cant be seen due to its thickness!

contextPattern.rotate(60 * Math.PI / 180);
Md Sifatul Islam
  • 846
  • 10
  • 28