| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Check shadow rendering rect and image with source-in.</title> |
| <style type="text/css"> |
| canvas { border: 1px solid #999; } |
| #source-canvas { display: none; } |
| </style> |
| </head> |
| <body> |
| <div>Test Rect</div> |
| <canvas id="canvas-for-color" width="200" height="200"></canvas> |
| <div>Test Image</div> |
| <canvas id="canvas-for-image" width="200" height="200"></canvas> |
| <canvas id="source-canvas" width="100" height="100"></canvas> |
| <script> |
| var canvas_color = document.getElementById("canvas-for-color"); |
| var ctx_color = canvas_color.getContext("2d"); |
| setupContext(ctx_color); |
| ctx_color.fillStyle = 'teal'; |
| ctx_color.fillRect(100, 100, 100, 100); |
| |
| var source_canvas = document.getElementById('source-canvas'); |
| var source_ctx = source_canvas.getContext('2d'); |
| source_ctx.fillStyle = 'teal'; |
| source_ctx.fillRect(0, 0, 100, 100); |
| |
| var canvas_image = document.getElementById("canvas-for-image"); |
| var ctx_image = canvas_image.getContext("2d"); |
| setupContext(ctx_image); |
| ctx_image.drawImage(source_canvas, 100, 100, 100, 100); |
| |
| function setupContext(ctx) { |
| ctx.globalCompositeOperation = 'source-over'; |
| ctx.fillStyle = 'black'; |
| ctx.fillRect(50, 50, 200, 100); |
| ctx.globalCompositeOperation = 'source-in'; |
| ctx.shadowColor = 'blue'; |
| ctx.shadowBlur = 10; |
| ctx.shadowOffsetX = -10; |
| ctx.shadowOffsetY = -10; |
| } |
| </script> |
| </body> |
| </html> |
