Example of implementing canvas shadow effect in html5_html5 tutorial skills

Implementing Canvas shadow effect in HTML5

Copy code

The code is as follows:

<script><br> var ctx = null; // global variable 2d context<br> var imageTexture = null;<br> window.onload = function() {<br> var canvas = document.getElementById("text_canvas");<br> console.log(canvas.parentNode.clientWidth);<br> canvas.width = canvas.parentNode.clientWidth;<br> canvas.height = canvas.parentNode.clientHeight;<br> <br> if (!canvas.getContext) {<br> console.log("Canvas not supported. Please install a HTML5 compatible browser.");<br> return;<br> }<br> var context = canvas.getContext('2d');<br> <br> // section one - shadow and blur<br> context.fillStyle="black";<br> context.fillRect(0, 0, canvas.width, canvas.height/4);<br> context.font = '60pt Calibri';<br> <br> context.shadowColor = "white";<br> context.shadowOffsetX = 0;<br> context.shadowOffsetY = 0;<br> context.shadowBlur = 20;<br> context.fillText("Blur Canvas", 40, 80);<br> context.strokeStyle = "RGBA(0, 255, 0, 1)";<br> context.lineWidth = 2;<br> context.strokeText("Blur Canvas", 40, 80);<br> <br> // section two - shadow font<br> var hh = canvas.height/4;<br> context.fillStyle="white";<br> context.fillRect(0, hh, canvas.width, canvas.height/4);<br> context.font = '60pt Calibri';<br> <br> context.shadowColor = "RGBA(127,127,127,1)";<br> context.shadowOffsetX = 3;<br> context.shadowOffsetY = 3;<br> context.shadowBlur = 0;<br> context.fillStyle = "RGBA(0, 0, 0, 0.8)";<br> context.fillText("Blur Canvas", 40, 80 hh);<br> <br> // section three - down shadow effect<br> var hh = canvas.height/4 hh;<br> context.fillStyle="black";<br> context.fillRect(0, hh, canvas.width, canvas.height/4);<br> for(var i = 0; i < 10; i )<br /> {<br /> context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")";<br /> context.shadowOffsetX = i*2;<br /> context.shadowOffsetY = i*2;<br /> context.shadowBlur = i*2;<br /> context.fillStyle = "RGBA(127, 127, 127, 1)";<br /> context.fillText("Blur Canvas", 40, 80 hh);<br /> }<br /> <br /> // section four - fade effect<br /> var hh = canvas.height/4 hh;<br /> context.fillStyle="green";<br /> context.fillRect(0, hh, canvas.width, canvas.height/4);<br /> for(var i = 0; i < 10; i )<br /> {<br /> context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")";<br /> context.shadowOffsetX = 0;<br /> context.shadowOffsetY = -i*2;<br /> context.shadowBlur = i*2;<br /> context.fillStyle = "RGBA(127, 127, 127, 1)";<br /> context.fillText("Blur Canvas", 40, 80 hh);<br /> }<br /> for(var i = 0; i < 10; i )<br /> {<br /> context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")";<br /> context.shadowOffsetX = 0;<br /> context.shadowOffsetY = i*2;<br /> context.shadowBlur = i*2;<br /> context.fillStyle = "RGBA(127, 127, 127, 1)";<br /> context.fillText("Blur Canvas", 40, 80 hh);<br /> }<br /> for(var i = 0; i < 10; i )<br /> {<br /> context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")";<br /> context.shadowOffsetX = i*2;<br /> context.shadowOffsetY = 0;<br /> context.shadowBlur = i*2;<br /> context.fillStyle = "RGBA(127, 127, 127, 1)";<br /> context.fillText("Blur Canvas", 40, 80 hh);<br /> }<br /> for(var i = 0; i < 10; i )<br /> {<br /> context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")";<br /> context.shadowOffsetX = -i*2;<br /> context.shadowOffsetY = 0;<br /> context.shadowBlur = i*2;<br />context.fillStyle = "RGBA(127, 127, 127, 1)";<br /> context.fillText("Blur Canvas", 40, 80 hh);<br /> }<br /> }<br /> <br /> </script>

HTML5 Canvas

Fill And Stroke Clip