Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (HTML Canvas) expand_more

Canvas Setup

canvas element getContext 2d Canvas width and height attributes CSS size versus bitmap size Device pixel ratio scaling clearRect save and restore state Canvas fallback content OffscreenCanvas basics Context options

Paths & Shapes

beginPath moveTo and lineTo closePath stroke fill rect path arc arcTo quadraticCurveTo bezierCurveTo

Styling

fillStyle strokeStyle lineWidth lineCap lineJoin miterLimit setLineDash lineDashOffset globalAlpha createLinearGradient

Text & Images

fillText strokeText font property textAlign textBaseline measureText drawImage basic drawImage cropping Image loading before draw createPattern

Transforms

translate rotate scale transform setTransform resetTransform Transform around a pivot Mirror drawing Coordinate conversion DOMMatrix with canvas

Compositing & Clipping

globalCompositeOperation source-over destination-over source-in destination-in lighter blending copy compositing clip path Even-odd fill rule Shadow blur Shadow offsets

Pixels & Animation

getImageData putImageData createImageData Pixel grayscale filter Pixel alpha manipulation requestAnimationFrame Frame delta time Animation loop cancellation Double buffering concept Dirty rectangle rendering

Interaction & Performance

Pointer coordinates Hit testing with isPointInPath Hit testing with isPointInStroke Keyboard-controlled canvas Accessible canvas fallback High-DPI rendering Batch path drawing Avoid layout reads in loop Offscreen rendering Export with toDataURL

HTML Canvas / Pixels & Animation

Pixel grayscale filter

Learn Pixel grayscale filter in HTML Canvas with a focused explanation, a topic-specific example, edge guidance, and a mastery check.

12 min read • Advanced

canvas-064.js

js

const canvas=document.querySelector("canvas");
const ctx=canvas.getContext("2d");
const img=ctx.getImageData(0,0,canvas.width,canvas.height);for(let i=0;i<img.data.length;i+=4){const g=(img.data[i]+img.data[i+1]+img.data[i+2])/3;img.data[i]=img.data[i+1]=img.data[i+2]=g}ctx.putImageData(img,0,0);

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Pixel grayscale filter Mastery Check →

createImageData

Pixel alpha manipulation