Graphics & Animation (Canvas, SVG, Transforms, Effects)

Canvas Basics

100

Which HTML element is used for drawing graphics with JavaScript?

<canvas>

200

What attribute on <canvas> sets its drawing width?

width

300

Method used on the 2D context to draw a filled rectangle.

fillRect()

400

Before drawing on canvas, what method do you call to get the 2D context?

getContext("2d")

500

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

SVG Facts

100

Is SVG vector-based or bitmap-based?

Vector-based

200

Which tag creates a circle in SVG?

<circle>

300

One advantage of SVG compared to canvas for icons and logos.

Scales without losing quality / easily styled / selectable / searchable

400

What file extension is commonly used for standalone SVG files?

.svg

500

Why is SVG often better than raster images for responsive design?

It scales to any size without becoming blurry (resolution-independent)

Transformations

100

Which CSS property is used to rotate, scale, and move elements?

transform

200

What function do you use to rotate an element in CSS transforms?

rotate()

300

Which transform function moves an element along the x and y axes?

translate()

400

Which CSS transform makes an element bigger or smaller?

scale()

500

Give an example of a 3D transform in CSS.

rotateX(), rotateY(), rotateZ(), translateZ(),

Text & Visual Effects

100

CSS property used to change the font family of text.

font-family

200

Which property adds a shadow behind text?

text-shadow

300

Which property adds a shadow behind boxes like divs and images?

box-shadow

400

What does WOFF stand for in web fonts?

Web Open Font Format

500

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

CSS Filters

100

Which CSS property applies visual filters such as blur or grayscale?

filter

200

Which filter function makes an image blurry?

blur()

300

Which filter function converts an image to black and white?

grayscale()

400

Which filter function changes how bright an image appears?

brightness()

500

You want to slightly reduce the visibility of an image without changing opacity directly. Which filter function could you use?

opacity() (via filter: opacity(...))