The CanvasRenderingContext2D
.shadowOffsetY
property of the Canvas 2D API specifies the distance that the shadow will be offset in vertical distance.
Syntax
ctx.shadowOffsetY = offset;
offset
- A float specifying the distance that the shadow will be offset in vertical distance. The default value is 0.
Infinity
orNaN
values are ignored.
Examples
Using the shadowOffsetY
property
This is just a simple code snippet using the shadowOffsetY
property to set a shadow with a vertical offset. Note that shadows are only drawn, if the shadowColor
property is set to a non-transparent value, too.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.shadowColor = 'black'; ctx.shadowOffsetY = 10; ctx.shadowBlur = 10; ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100);
Edit the code below and see your changes update live in the canvas:
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.shadowColor = 'black'; ctx.shadowOffsetY = 10; ctx.shadowBlur = 10; ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100);</textarea>
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var edit = document.getElementById('edit'); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener('click', function() { textarea.value = code; drawCanvas(); }); edit.addEventListener('click', function() { textarea.focus(); }) textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas);
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.shadowOffsetY' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |