SO - rotate image1111

by jimkennelly

HTML

<button onclick="Rotatectx()">Rotate</button>
<div id="IDD">
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
</div>

CSS

body {
    margin: 10px;
    padding: 10px;
}

JavaScript

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


render();

function Rotatectx() {

    ctx.clearRect(0, 0, c.width, c.height); /// clear canvas with
    /// current rotation.

ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

ctx.translate(c.width * 0.5, c.height * 0.5); /// translate to center first
    ctx.rotate(10 * Math.PI / 180); /// rotate
    ctx.translate(-c.width * 0.5, -c.height * 0.5); /// translate back

    render(); /// call the drawing
}


function render() {

    ctx.save(); /// this saves current state

    ctx.beginPath(); /// important!

    ctx.fillStyle = '#FF3399';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowColor = "#009933";

    ctx.translate(200, 100);

    var gradient = ctx.createLinearGradient(0, 0, 170, 0);
    gradient.addColorStop("0", "magenta");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("1.0", "red");

    ctx.strokeStyle = gradient;
    ctx.lineWidth = 5;

    var grd = ctx.createRadialGradient(238, 50, 10, 238, 50, 300);
    grd.addColorStop(0, '#8ED6FF');
    grd.addColorStop(1, '#004CB3');

    // for custom shape.
    ctx.moveTo(120, 20);
    ctx.lineTo(30, 90);
    ctx.lineTo(30, 130);
    ctx.lineTo(120, 200);
    ctx.lineTo(210, 130);
    ctx.lineTo(210, 90);
    ctx.lineTo(120, 20);
    ctx.closePath();
    ctx.fillstyle = '#8ED6FF';
    ctx.fill();
    ctx.stroke();

    ctx.restore(); /// this restore to previous state
}