47 lines
1.5 KiB
Plaintext
47 lines
1.5 KiB
Plaintext
|
# Questions
|
||
|
|
|
||
|
|
1. When calling `getContext('2d')` on a Canvas element, it will return a drawing context (i.e. the type of canvas) - in this case a two-dimensional context. How can we get a three-dimensional context instead?
|
||
|
|
|
||
|
|
You could use any version of WebGL. Webgl is an API for rendering graphics on the web, with the help of things like hardware acceleration and compiled function libraries which will run a lot faster than interpreting everything as javascript. Most modern browsers have an implementation of WebGL.
|
||
|
|
|
||
|
|
Example of usage:
|
||
|
|
```javascript
|
||
|
|
const ctx = canvas.getContext('webgl');
|
||
|
|
```
|
||
|
|
|
||
|
|
2. How would you create a blue circle using the Canvas element? Explain with words or code.
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
const drawCircle = (x, y, radius) => {
|
||
|
|
context.beginPath();
|
||
|
|
context.fillStyle('blue');
|
||
|
|
context.arc(x,y,0, Math.PI*2);
|
||
|
|
context.fill();
|
||
|
|
}
|
||
|
|
|
||
|
|
drawCircle();
|
||
|
|
```
|
||
|
|
|
||
|
|
3. What is a more terse (also known as shorter) way of writing the loop in the following usingthe Array.filter method?
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
const countries = ['Norway', 'Sweden', 'Denmark', 'New Zealand'];
|
||
|
|
const countriesStartingWithN = [];
|
||
|
|
|
||
|
|
for (let i = 0; i < countries.length; i++) {
|
||
|
|
let country = countries[i];
|
||
|
|
if (country.startsWith('N')) {
|
||
|
|
countriesStartingWithN.push(country);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
```javascript
|
||
|
|
const countries = ['Norway', 'Sweden', 'Denmark', 'New Zealand'];
|
||
|
|
|
||
|
|
const countriesStartingWithN = countries.filter(
|
||
|
|
country => country.startsWith('n')
|
||
|
|
);
|
||
|
|
```
|
||
|
|
|
||
|
|
[//]: # vim: set syntax=markdown:
|