Question

How to draw a rectangle with shadow on canvas in JavaScript

Answer 1

<canvas id="canvas" width="1024" height="600"></canvas>

<script type="text/JavaScript">   

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

ctx.shadowColor = "black";
ctx.shadowBlur = 10;

ctx.fillStyle = "white";
ctx.fillRect(10, 10, 200, 100);

</script>

 

70+ SQL courses for beginners and professionals

Answer 2

<canvas id="canvas" width="1024" height="600"></canvas>

<script type="text/JavaScript">   

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

ctx.shadowColor = "blue";
ctx.shadowBlur = 7;

ctx.fillStyle = "white";
ctx.fillRect(10, 10, 150, 100);

</script>

 

70+ SQL courses for beginners and professionals

Answer 3

<canvas id="canvas" width="1024" height="600"></canvas>

<script type="text/JavaScript">   

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

ctx.shadowColor = "black";
ctx.shadowOffsetY = 7;
ctx.shadowOffsetX = 7;

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 150, 100);

</script>

 

70+ SQL courses for beginners and professionals

Answer 4

<canvas id="canvas" width="1024" height="600"></canvas>

<script type="text/JavaScript">   

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

ctx.shadowColor = "black";
ctx.shadowOffsetY = 7;
ctx.shadowBlur = 7;
                  
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 150, 100);

</script>

 

70+ SQL courses for beginners and professionals