Canvas Basics
Which HTML element is used for drawing graphics with JavaScript?
<canvas>
Is SVG vector-based or bitmap-based?
Vector-based
Which CSS property is used to rotate, scale, and move elements?
transform
CSS property used to change the font family of text.
font-family
Which CSS property applies visual filters such as blur or grayscale?
filter
What attribute on <canvas> sets its drawing width?
width
Which tag creates a circle in SVG?
<circle>
What function do you use to rotate an element in CSS transforms?
rotate()
Which property adds a shadow behind text?
text-shadow
Which filter function makes an image blurry?
blur()
Method used on the 2D context to draw a filled rectangle.
fillRect()
One advantage of SVG compared to canvas for icons and logos.
Scales without losing quality / easily styled / selectable / searchable
Which transform function moves an element along the x and y axes?
translate()
Which property adds a shadow behind boxes like divs and images?
box-shadow
Which filter function converts an image to black and white?
grayscale()
Before drawing on canvas, what method do you call to get the 2D context?
getContext("2d")
What file extension is commonly used for standalone SVG files?
.svg
Which CSS transform makes an element bigger or smaller?
scale()
What does WOFF stand for in web fonts?
Web Open Font Format
Which filter function changes how bright an image appears?
brightness()
Why might a canvas drawing look blurry on high-DPI (Retina) screens?
Canvas resolution doesn’t match device pixel ratio / not scaled for high DPI
Why is SVG often better than raster images for responsive design?
It scales to any size without becoming blurry (resolution-independent)
Give an example of a 3D transform in CSS.
rotateX(), rotateY(), rotateZ(), translateZ(),
Why are web font formats like WOFF and WOFF2 preferred over raw TTF on the web?
They’re compressed and optimized for web delivery and browser compatibility
You want to slightly reduce the visibility of an image without changing opacity directly. Which filter function could you use?
opacity() (via filter: opacity(...))