CTX STYLE

Monday, 31 July 2017

CTX STYLE

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){<!--  w w w .  ja v  a2s .  c  o  m-->
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// draw rectangle
context.beginPath();
context.rect(240, 30, 130, 130);
context.fillStyle = "blue";
context.fill();

// draw circle
context.globalAlpha = 0.5; // set global alpha
context.beginPath();
context.arc(359, 150, 70, 0, 2 * Math.PI, false);
context.fillStyle = "red";
context.fill();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>
</html>


------------------------------------------------------------------------------------------------------------------

CODE:2
https://www.w3schools.com/tags/canvas_fillstyle.asp

http://www.w3resource.com/html5-canvas/

https://stackoverflow.com/questions/27981423/how-to-fill-color-of-more-than-one-canvas-image


------------------------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Test</title>
</head>
<body>
<header> </header>
<nav> </nav>
<section>

<div>
<canvas id="canvas" width="320" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

<script type="text/javascript">
var canvas;
var ctx;

function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
draw();
}


function draw() {

ctx.fillStyle = '#FA6900';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur    = 4;
ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(0,0,15,150);
ctx.save();

ctx.fillStyle = '#E0E4CD';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur    = 4;
ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(30,0,30,150);
ctx.save();

ctx.fillStyle = '#A7DBD7';
ctx.shadowOffsetX = 15;
ctx.shadowOffsetY = 15;
ctx.shadowBlur    = 4;
ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(90,0,45,150);
ctx.save();

ctx.restore();
ctx.beginPath();
ctx.arc(185, 75, 22, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

ctx.restore();
ctx.beginPath();
ctx.arc(260, 75, 15, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

ctx.restore();
ctx.beginPath();
ctx.arc(305, 75, 8, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}

init();
</script>
</section>
<aside> </aside>
<footer> </footer>
</body>
</html>


You can copy this code and paste it into a new file called something like saverestore.html and when you open it with an HTML5 friendly browser like Firefox 3.6 it will display the canvas.


First we draw a rectangle setting the fillStyle and shadow properties for our shape. Then we call ctx.save() which adds our settings to the stack.

    ctx.fillStyle = '#FA6900'; 
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';      
    ctx.fillRect(0,0,15,150);
    ctx.save();  







Then we draw another rectangle setting the fillStyle and shadow properties for our shape and call ctx.save() which adds our settings to the stack.

    ctx.fillStyle = '#E0E4CD'; 
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';      
    ctx.fillRect(30,0,30,150);
    ctx.save(); 







And we draw another rectangle setting the fillStyle and shadow properties for our shape. Then we call ctx.save() which adds our settings to the stack.

    ctx.fillStyle = '#A7DBD7'; 
    ctx.shadowOffsetX = 15;
    ctx.shadowOffsetY = 15;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';      
    ctx.fillRect(90,0,45,150);
    ctx.save();







Now we call ctx.restore() and pop the settings off of the top of our stack and we draw a circle using those settings.

    ctx.restore();
    ctx.beginPath();
    ctx.arc(185, 75, 22, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();  







Another call to ctx.restore() pops the next settings off of the top of our stack and we draw a circle using those settings.

    ctx.restore();
    ctx.beginPath();
    ctx.arc(260, 75, 15, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill(); 







And a final call to ctx.restore() pops the next settings off of the top of our stack and we draw a circle using those settings.

    ctx.restore();
    ctx.beginPath();
    ctx.arc(305, 75, 8, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();