CanvasRenderingContext2D - об'єкт для малювання на плотні елемента canvas.
obCrc2d = canvas.getContext("2d");
obCrc2d - змінна яка отримує об'єкт CanvasRenderingContext2D.
CanvasRenderingContext2D об'єкт який містить методи і властивості для малювання на полотні canvas.
Щоб отримати об'єкт CanvasRenderingContext2D використовується метод canvas.getContext().
Об'єкт CanvasRenderingContext2D дозволяє малювати на полотні canvas: текст, лінії, прямокутники, коло і т.п.
var elCanvas = document.getElementById("canvas");
if(elCanvas.getContext){
var ctx= elCanvas.getContext("2d");
elCanvas.onmousemove=function(e){
var gradient = ctx.createRadialGradient(e.offsetX, e.offsetY, 50, e.offsetX, e.offsetY, 0);
gradient.addColorStop(0, "black");
gradient.addColorStop(0.9, "white");
ctx.fillStyle="black";
ctx.fillRect(0, 0, elCanvas.width, elCanvas.height );
ctx.fillStyle = gradient;
ctx.fillRect( (e.offsetX-100<0? 0: e.offsetX-100), (e.offsetY-100<0? 0: e.offsetY-100), e.offsetX+100, e.offsetY+100);
}
}else alert("Ваш браузер не підтримує getContext");
Приклад "світла ліхтарика" на полотні canvas:
var elCanvas = document.getElementById("canvas");
var ctx= elCanvas.getContext("2d");
elCanvas.onmousemove=function(e){
var gradient = ctx.createRadialGradient(e.offsetX, e.offsetY, 50, elCanvas.width/2, 0, 5);
gradient.addColorStop(0.9, "white");
gradient.addColorStop(0.1, "black");
ctx.fillStyle="black";
ctx.fillRect(0, 0, elCanvas.width, elCanvas.height );
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, elCanvas.width, elCanvas.height );
}