Written by As a language for structuring and presenting content for the World Wide Web, HTML5 is becoming more and more popular. People are expecting creations that HTML5 can bring to us. HTML5 shadow covers a sub-section of what is possible, including HTML5 canvas shadow, HTML5 text shadow and HTML5 drop shadow. HTML5 shadow can be created in HTML5 <canvas>. To offset HTML5 shadows with the Canvas, we can use the shadowOffsetX and the shadowOffsetY properties of the canvas context.
In this post, I present you 12 tutorials of HTML5 shadow examples. Hope you will enjoy reading those HTML5 shadow code!
1. HTML5 canvas shadow Off set Attribute
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.rect(20,20,100,80);
ctx.fillStyle="red";
ctx.shadowColor="black";
ctx.shadowBlur=10;
ctx.shadowOffsetY=30;
ctx.fill();
2. Applying a HTML5 Drop Shadow
function drawCanvas() {
// Get our Canvas element
var surface = document.getElementById("myCanvas");
if (surface.getContext) {
// If Canvas is supported
var context = surface.getContext('2d');
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur = 5;
context.shadowColor = "black";
// Set the fill style to Red
context.fillStyle = "rgb(255,0,0)";
// Draw the rectangle 50x50 pixels in dimension at x/y 10,10
context.fillRect(10, 10, 100, 100);
}
3. How to draw the star with shadow on HTML5 Canvas
<script type="text/javascript">
function init() {
var ctx = document.getElementById('stars').getContext('2d');
ctx.fillStyle = "#827839";
ctx.shadowColor="#000000";
ctx.shadowOffsetX=6;
ctx.shadowOffsetY=6;
ctx.shadowBlur=9;
ctx.beginPath();
ctx.moveTo(15, 150);
ctx.lineTo(100,140);
ctx.lineTo(170,90);
ctx.lineTo(230,140);
ctx.lineTo(315,150);
ctx.lineTo(230,200);
ctx.lineTo(300,263);
ctx.lineTo(170,233);
ctx.lineTo(30,263);
ctx.lineTo(100,200);
ctx.closePath();
ctx.fill();
}
window.addEventListener('load', init, false);
</script>
4. Inner/outer HTML5 shadows in Canvas
function innerShadow() {
function drawShape() { // draw anti-clockwise
ctx.arc(0, 0, 100, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(70, 0);
ctx.arc(0, 0, 70, 0, Math.PI, false); // Mouth
ctx.moveTo(-20, -20);
ctx.arc(30, -30, 10, 0, Math.PI * 2, false); // Left eye
ctx.moveTo(140, 70);
ctx.arc(-20, -30, 10, 0, Math.PI * 2, false); // Right eye
};
var width = 200;
var offset = width + 50;
var innerColor = "rgba(0,0,0,1)";
var outerColor = "rgba(0,0,0,1)";
ctx.translate(150, 170);
// apply inner-shadow
ctx.save();
ctx.fillStyle = "#000";
ctx.shadowColor = innerColor;
ctx.shadowBlur = getBlurValue(120);
ctx.shadowOffsetX = -15;
ctx.shadowOffsetY = 15;
// create clipping path (around blur + shape, preventing outer-rect blurring)
ctx.beginPath();
ctx.rect(-offset/2, -offset/2, offset, offset);
ctx.clip();
// apply inner-shadow (w/ clockwise vs. anti-clockwise cutout)
ctx.beginPath();
ctx.rect(-offset/2, -offset/2, offset, offset);
drawShape();
ctx.fill();
ctx.restore();
// cutout temporary rectangle used to create inner-shadow
ctx.globalCompositeOperation = "destination-out";
ctx.fill();
// prepare vector paths
ctx.beginPath();
drawShape();
// apply fill-gradient to inner-shadow
ctx.save();
ctx.globalCompositeOperation = "source-in";
var gradient = ctx.createLinearGradient(-offset/2, 0, offset/2, 0);
gradient.addColorStop(0.3, '#ff0');
gradient.addColorStop(0.7, '#f00');
ctx.fillStyle = gradient;
ctx.fill();
// apply fill-pattern to inner-shadow
ctx.globalCompositeOperation = "source-atop";
ctx.globalAlpha = 1;
ctx.rotate(0.9);
ctx.fillStyle = ctx.createPattern(image, 'repeat');
ctx.fill();
ctx.restore();
// apply fill-gradient
ctx.save();
ctx.globalCompositeOperation = "destination-over";
var gradient = ctx.createLinearGradient(-offset/2, -offset/2, offset/2, offset/2);
gradient.addColorStop(0.1, '#f00');
gradient.addColorStop(0.5, 'rgba(255,255,0,1)');
gradient.addColorStop(1.0, '#00f');
ctx.fillStyle = gradient
ctx.fill();
// apply fill-pattern
ctx.globalCompositeOperation = "source-atop";
ctx.globalAlpha = 0.2;
ctx.rotate(-0.4);
ctx.fillStyle = ctx.createPattern(image, 'repeat');
ctx.fill();
ctx.restore();
// apply outer-shadow (color-only without temporary layer)
ctx.globalCompositeOperation = "destination-over";
ctx.shadowColor = outerColor;
ctx.shadowBlur = 40;
ctx.shadowOffsetX = 15;
ctx.shadowOffsetY = 10;
ctx.fillStyle = "#fff";
ctx.fill();
};
<div><canvas id="c8" width="200" height = "200" style="border:solid 1px #000000;"></canvas></div>
<script>
var c8 = document.getElementById("c8");
var c8_context = c8.getContext("2d");
function draw_rectangle() {
c8_context.shadowOffsetX = 5;
c8_context.shadowOffsetY = 5;
c8_context.shadowBlur = 10;
c8_context.shadowColor = "DarkGoldenRod";
c8_context.fillStyle = "Gold";
c8_context.fillRect(20, 20, 100, 120);
}
window.onload = draw_rectangle();
</script>
6. HTML5 Canvas Shadow Offset Tutorial
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(188, 40, 200, 100);
context.fillStyle = "#8ED6FF";
context.shadowColor = "#bbbbbb";
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();
};
7. How to Create Shadow Effect in HTML5 Canvas
var drawLogo = function(){
var canvas = document.getElementById('my_canvas');
var context = canvas.getContext('2d');
var gradient = context.createLinearGradient(0, 0, 50, 100);
gradient.addColorStop(0,'white');
gradient.addColorStop(1, 'black');
context.fillStyle = gradient;
context.strokeStyle = gradient;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.shadowColor = '#0036ff';
context.fillRect (10, 10, 100, 100);
context.fill();
context.closePath();
};
$(function(){
var canvas = document.getElementById('my_canvas');
if (canvas.getContext){
drawLogo();
}
});
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
context.shadowColor = "#666666"; //or use rgb(red, green, blue)
context.fillStyle = "#000000";
context.fillRect(10,10, 50, 50);
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5 Canvas Shadow", 10,120);
9. Apply shadow on HTML5 canvas
function canvasloader(){
var mycanvas = document.getElementById("canvas");
var mycontext = mycanvas.getContext("2d");
appyShadow(mycontext);
drawSquare(mycontext);
drawText(mycontext);
}
function appyShadow(context){
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowColor = 'black';
context.shadowBlur = 5;
}
function drawText(context){
var myText = "Hello HTML5";
context.fillStyle = "#FF0000";
context.fillText (myText, 50, 50);
context.fillStyle = "#00FF00";
context.fillText (myText, 100, 100);
context.fillStyle = "#0000FF";
context.fillText (myText, 150, 150);
}
function drawSquare(context){
context.fillStyle = "gray";
context.fillRect(25,25,200,200)
if ( !window.requestAnimationFrame ) {
window.requestAnimationFrame = ( function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
window.setTimeout( callback, 1000 / 60 );
};
} )();
}
// grab the canvas element, get the context for API access and
// preset some variables
var canvas = document.querySelector( 'canvas' ),
c = canvas.getContext( '2d' ),
mouseX = 0,
mouseY = 0,
width = 300,
height = 300,
distx = 0,
disty = 0,
hw = width / 2,
hh = height / 2,
longest = Math.sqrt( ( hw * hw ) + ( hh * hh ) ),
factor = 0.4,
realdistance = 0,
blur = [ 2, 9 ],
shadowalpha = [ 3, 8 ],
blurfactor = blur[1] / longest,
shadowfactor = shadowalpha[1] / longest,
increase = 0;
// resize the canvas
canvas.width = width;
canvas.height = height;
draw();
function draw() {
// calculate the distance caused by the offset
distx = mouseX - hw;
disty = mouseY - hh;
increase+=0.03;
var distx = 80 * Math.cos(increase) + 60 * Math.cos(increase*2);
var disty = 100 * Math.sin(increase*2) + 20 * Math.cos(increase);
realdistance = Math.sqrt( ( distx * distx ) + ( disty * disty ) );
var currentblur = parseInt( blurfactor * realdistance, 10 );
if ( currentblur < blur[ 0 ] ) {currentblur = blur[0];}
var currentalpha = parseInt( shadowfactor * realdistance, 10 );
if ( currentalpha < shadowalpha[ 0 ] ) { currentalpha = shadowalpha[0]; }
c.clearRect( 0, 0, width, height );
c.save();
c.translate( hw, hh);
c.beginPath();
c.shadowOffsetX = -distx * factor;
c.shadowOffsetY = -disty * factor;
c.shadowBlur = currentblur;
c.shadowColor = 'rgba(0,0,0,' + (1 - currentalpha / 10) + ')';
c.fillStyle = 'lime';
var text = 'Text with shadow';
c.font = "bold 24px sans-serif";
var len = c.measureText( text );
c.fillText( text, -len.width / 2, 12 );
c.closePath();
var grd = c.createRadialGradient(distx+10,disty-10,3,distx+10,disty-10,40);
grd.addColorStop(0, "white");
grd.addColorStop(1, "orange");
c.fillStyle = grd;
c.shadowColor = 'rgba(0,0,0,0)';
c.beginPath();
c.arc( distx, disty, 20 , 0, Math.PI*2, true );
c.closePath();
c.fill();
c.restore();
requestAnimationFrame( draw, 10 )
function doFirst(){
var x = document.getElementById(‘canvas’);
canvas = x.getContext(’2d’);
canvas.shadowOffsetX=4;
canvas.shadowOffsetY=4;
canvas.shadowBlur=6;
canvas.shadowColor=’rgba(0,0,255,.5)’;
canvas.font="bold 36px Tahoma";
canvas.textAlign="start";
canvas.fillText("Douglas’s HTML5 Study",10,100);
canvas.textBaseline = "top";
canvas.fillText(‘Top’, 10, 200);
canvas.textBaseline = "bottom";
canvas.fillText(‘Bottom’, 90, 200);
canvas.textBaseline = "middle";
canvas.fillText(‘Middle’, 200, 200);
canvas.textBaseline = "alphabetic";
canvas.fillText(‘Alphabetic’, 300, 200);
canvas.textBaseline = "hanging";
canvas.fillText(‘Hanging’, 400, 200);
}
window.addEventListener("load",doFirst,false);
12. Draw Text and Shadows with GWTCanvas
canvas.saveContext(); canvas.setShadowBlur(5); canvas.setShadowOffset(4, 4); canvas.setShadowColor(Color.BLACK); canvas.setFillStyle(Color.RED); canvas.fillRect(10, 20, 50, 50); canvas.removeShadow(); canvas.setStrokeStyle(Color.BLACK); canvas.strokeRect(10, 20, 50, 50); canvas.restoreContext();
