HTML5 Canvas and JavaScript Fundamentals

These flashcards cover key concepts and definitions related to HTML5 Canvas and JavaScript, assisting in exam preparation.

What is the first tag in the XML structure after the document declaration?

The root element.

What tag is used for drawing graphics dynamically with JavaScript in HTML5?

The HTML5 <canvas> element

What browsers can execute the tag?

Modern (HTML5-compatible) browsers.

What does the CSS property box-sizing: border-box; do?

It causes padding and border to be included in the element’s total width and height.

What does the margin: 0 auto; style do?

It centers an element horizontally.

When linking to a hosted library like jQuery, where must the link come?

Before your custom JavaScript file.

What is the main reason to give classes to HTML elements?

To target and style or manipulate multiple elements with CSS/JavaScript.

What must the first variable in the script that draws on the canvas be?

The <canvas> element.

What must the second variable in the script that draws on the canvas be?

The drawing context (getContext('2d')).

What is moveTo() in the context of canvas drawing?

A method that moves the drawing cursor to a new starting point with parameters: x, y.

What are the parameters for fillStyle="rgba(?, ?, ?, ?)", and what do they represent?

Red, green, blue, alpha (opacity).

What does createLinearGradient(x1, y1, x2, y2) define?

The start and end coordinates of the gradient.

What does the arcTo(x1, y1, x2, y2, radius) method do?

Creates an arc that connects two points with a specified radius.

What does the closePath() method do in canvas drawing?

Creates a path from the current point back to the starting point.

What does the code 'var children = document.getElementsByTagName('node');' create?

A collection (NodeList/HTMLCollection) of elements.

What should any JS script that uses jQuery start with?

$(document).ready(function() { … });

What are the parameters for fillRect() in canvas drawing?

x, y, width, height.

What are the parameters for fillText() in canvas drawing?

Text, x, y.

In the code 'setInterval(function () { drawOneNode() }, 200);', what does the 200 mean?

The function runs every 200 milliseconds.