Question 1

Canvas Intro

Accepted Answer

The HTML canvas element is used to draw graphics on a web page.

Question 2

Drawing

Accepted Answer

All drawing on the HTML canvas must be done with JavaScript.

Question 3

Coordinates

Accepted Answer

The HTML canvas is a two-dimensional grid.  The upper-left corner of the canvas has the coordinates (0,0)

Question 4

Linear Gradient

Accepted Answer

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.

Question 5

Radial Gradient

Accepted Answer

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.

Question 6

Text

Accepted Answer

To draw text on a canvas, the most important property and methods are font(), fillText(), strokeText()

Question 7

Canvas Image

Accepted Answer

To draw an image on a canvas, we have to use drawImage() method.

Question 8

canvas fillStyle Property in HTML

Accepted Answer

The fillStyle property sets or returns the color, gradient, or pattern used to fill the drawing.

Question 9

canvas strokeStyle Property in HTML

Accepted Answer

The strokeStyle property sets or returns the color, gradient, or pattern used for strokes.

Question 10

canvas shadowColor Property in HTML

Accepted Answer

The shadowColor property sets or returns the color to use for shadows.

Question 11

canvas shadowBlur Property in HTML

Accepted Answer

The shadowBlur property sets or returns the blur level for shadows.

Question 12

canvas shadowOffsetX Property in HTML

Accepted Answer

The shadowOffsetX property is used to sets or return the horizontal distance of the shadow from the shape.

Question 13

canvas shadowOffsetY Property in HTML

Accepted Answer

The shadowOffsetY property is used to sets or returns the vertical distance of the shadow from the shape.

Question 14

canvas createLinearGradient() Method in HTML

Accepted Answer

The createLinearGradient() method creates a linear gradient object. It is used to fill rectangles, circles, lines, etc.

Question 15

Canvas createPattern() Method in HTML

Accepted Answer

The createPattern() method repeats specified elements in a specified direction. The element can be an image, video, or another canvas element.

Question 16

canvas createRadialGradient() Method in HTML

Accepted Answer

The createRadialGradient() method creates a radial or circular gradient object. It can be used to fill rectangles, circles, lines, etc.

Question 17

canvas addColorStop() Method in HTML

Accepted Answer

The addColorStop() method is used to specify color and position in a gradient object. It is used together with createLinearGradient() or createRadialGradient().

Question 18

HTML canvas lineCap Property

Accepted Answer

The lineCap property sets or returns the style of the end caps for a line.

Question 19

canvas stroke() Method in HTML

Accepted Answer

The stroke() method is used to draw the path that is defined by moveTo() and lineTo() methods. The default color is black.

Question 20

canvas beginPath() Method in HTML

Accepted Answer

The beginPath() method begins a path, or resets the current path. It is used with lineTo(), arcTo(), moveTo(), quadricCurveTo(), bezierCurveTo(), arc() to create different styles of paths.

Question 21

canvas moveTo() Method in HTML

Accepted Answer

The moveTo() method moves the path to the specified point in the canvas, without creating a line.

Question 22

HTML canvas closePath() Method

Accepted Answer

The closePath() method creates a path from the current point back to the starting point.

Question 23

canvas lineTo() Method in HTML

Accepted Answer

The lineTo() method adds a new point and creates a line to that point from the last specified point in the canvas.

Question 24

canvas clip() Method in HTML

Accepted Answer

The clip() method clips a region of any shape and size from the original canvas. When a region is clipped, all drawings will happen on that clipped region.

Question 25

HTML canvas quadraticCurveTo() Method

Accepted Answer

The quadraticCurveTo() method is used to add a point to the current path by using the specified control points that represent a quadratic Bézier curve.

Question 26

HTML canvas bezierCurveTo() Method

Accepted Answer

The bezierCurveTo() method is used to add a point to the current path by using the specified control points that represent a cubic Bézier curve.

Question 27

canvas arc() Method in HTML

Accepted Answer

The arc() method is used to create an arc or curve.

Question 28

HTML canvas arcTo() Method

Accepted Answer

The arcTo() method is used to create an arc or curve between two tangents on canvas.

Question 29

canvas isPointInPath() Method in HTML

Accepted Answer

The isPointInPath() method is used to return true if the specified point is in the current path, otherwise false.

Question 30

HTML canvas lineJoin Property

Accepted Answer

The lineJoin property is used to sets or returns the type of corner created when two lines met each other.

Question 31

canvas lineWidth Property in HTML

Accepted Answer

The lineWidth property is used to sets or return the current line width, in pixels.

Question 32

canvas miterLimit Property in HTML

Accepted Answer

The miterLimit property sets or returns the maximum miter length. It is the distance between the inner corner and the outer corner where two lines meet.

Question 33

canvas rect() Method in HTML

Accepted Answer

The rect() method creates a rectangle. It is used in combination with the stroke() and fill() method to actually draw it on canvas.

Question 34

HTML canvas fillRect() Method

Accepted Answer

The fillRect() method is used to draw a filled rectangle. The default color of the fill is black

Question 35

canvas strokeRect() Method in HTML

Accepted Answer

The strokeRect() method is used to draw a rectangle. The default color is Black. We can change its color by strokeStyle() property.

Question 36

HTML canvas clearRect() Method

Accepted Answer

The clearRect() method is used to clear the specified pixels within a given rectangle.

Question 37

canvas fill() Method in HTML

Accepted Answer

The fill() method is used to fill the current drawing path. Its default value is black.

Question 38

canvas scale() Method in HTML

Accepted Answer

The scale() method is used to scales the current drawing, bigger or smaller.

Question 39

HTML canvas rotate() Method

Accepted Answer

The rotate() method is used to rotates the current drawing.

Question 40

canvas translate() Method in HTML

Accepted Answer

The translate() method is used to remaps the (0,0) position on the canvas.

Question 41

canvas transform() Method in HTML

Accepted Answer

The transform() method is used to replaces the current transformation matrix.

Question 42

canvas setTransform() Method in HTML

Accepted Answer

The setTransform() method is used to resets the current transform to the identity matrix, and then runs transform() with the same arguments.

Question 43

canvas font Property in HTML

Accepted Answer

The font property is used to sets or returns the current font properties for text content on the canvas.

Question 44

canvas textAlign Property in HTML

Accepted Answer

The textAlign property is used to sets or returns the current alignment for text content, according to the anchor point.

Question 45

canvas textBaseline Property in HTML

Accepted Answer

The textBaseline property is used to sets or returns the current text baseline used when drawing text.

Question 46

canvas fillText() Method in HTML

Accepted Answer

The fillText() method is used to draws filled text on the canvas. Its default color is black.

Question 47

canvas strokeText() Method in HTML

Accepted Answer

The strokeText() method is used to draw text without fill on the canvas. Its default color is black.

Question 48

canvas measureText() Method in HTML

Accepted Answer

The measureText() method is used to returns an object that contains the width of the specified text, in pixels.

Question 49

canvas drawImage() Method in HTML

Accepted Answer

The drawImage() method is used to draw an image, canvas onto the canvas.

Question 50

canvas ImageData width Property in HTML

Accepted Answer

The width returns the width of an ImageData object, in pixels. Its syntax is:- imgData.width;

Question 51

canvas ImageData height Property in HTML

Accepted Answer

The height returns the height of an ImageData object, in pixels. Its syntax is:- imgData.height;

Question 52

canvas ImageData data Property in HTML

Accepted Answer

The data property is used to return an object that contains image data of the specified ImageData object.

Question 53

canvas createImageData() Method in HTML

Accepted Answer

The createImageData() method is used to create a new, blank ImageData object. Its pixel values are transparent black by default.

Question 54

canvas getImageData() Method in HTML

Accepted Answer

The getImageData() method is used to return an ImageData object that copies the pixel data for the specified rectangle on a canvas.

Question 55

canvas putImageData() Method in HTML

Accepted Answer

The putImageData() method is used to put the image data back onto the canvas from a specified ImageData object.

Question 56

canvas globalAlpha Property in HTML

Accepted Answer

The globalAlpha property is used to sets or returns the current alpha or transparency value of the drawing.

Question 57

canvas globalCompositeOperation Property in HTML

Accepted Answer

The globalCompositeOperation property is used to define how a new (source) image is drawn onto an existing (destination) image.

Canvas

All Canvas Tutorials, Quizzes & Exercises

Contact Us

Hire An Expert From Our Platform