Рисование Тень объекта в холсте

Question

Я хочу нарисовать один круг и символ с тенью на холсте на странице HTML при загрузке страницы и воссоздать изображение при нажатии кнопки. Я использую этот код:

window.onload = function() { 

    draw(); 
}; 

function draw(){ 

var c = document.getElementById("canvas"); 
var ctx = c.getContext("2d"); 
ctx.clearRect(0, 0, c.width, c.height); 
var width = c.width; 
var height = c.height; 

//DRAW A CIRCLE 
var centerX = Math.floor((Math.random() * width)); 
var centerY = Math.floor((Math.random() * height)); 
var radius = Math.floor(Math.random() * 50); 
var color = '#f11'; 
ctx.fillStyle = color; 
ctx.beginPath(); 
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false); 
ctx.closePath(); 
ctx.fill(); 

//DRAW A CHARACTER WITH SHADOW 
var c = "S"; 
ctx.font = "300% Verdana"; 
ctx.shadowBlur = 20; 
ctx.shadowColor = "black"; 
ctx.shadowOffsetX = 20; 
ctx.shadowOffsetY = 20; 
ctx.fillStyle = "#111"; 
ctx.fillText(c, 10, 90); 
} 

В HTML я вызываю функцию отрисовки OnClick() событие кнопки с именем Refresh. Впервые он дает желаемый результат, рисуя один круг и символ с тенью. Когда я нажимаю кнопку «Обновить», он рисует объекты с тенью. Я не хочу рисовать тень круга. Кто-нибудь может сказать мне ошибку, которую я здесь делаю.

Answer 1

Вы можете использовать CanvasRenderingContext2D.save() метод:

window.onload = function() { 
 

 
    draw(); 
 
}; 
 
document.getElementById("canvas").addEventListener('click', draw); 
 

 
function draw(){ 
 

 
var c = document.getElementById("canvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.clearRect(0, 0, c.width, c.height); 
 
var width = c.width; 
 
var height = c.height; 
 

 
//DRAW A CIRCLE 
 
var centerX = Math.floor((Math.random() * width)); 
 
var centerY = Math.floor((Math.random() * height)); 
 
var radius = Math.floor(Math.random() * 50); 
 
var color = '#f11'; 
 
ctx.fillStyle = color; 
 
ctx.beginPath(); 
 
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false); 
 
ctx.closePath(); 
 
ctx.fill(); 
 

 
//DRAW A CHARACTER WITH SHADOW 
 
//save the actual context 
 
    ctx.save(); 
 
var c = "S"; 
 
ctx.font = "300% Verdana"; 
 
ctx.shadowBlur = 20; 
 
ctx.shadowColor = "black"; 
 
ctx.shadowOffsetX = 20; 
 
ctx.shadowOffsetY = 20; 
 
ctx.fillStyle = "#111"; 
 
ctx.fillText(c, 10, 90); 
 
    //restore it 
 
ctx.restore(); 
 
}

canvas{border:1px solid;}

<canvas id="canvas" width="400" height="200"></canvas>