canvas element test

Pass Criteria

Reference

Test cv-001: Canvas element

The woman in the painting is wearing a flowing white dress. A large piece of intricately patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. Her expression is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. Two have blown out.

Code

<canvas id="myCanvas" width="338" height="258">
	<p>The woman in the painting is wearing a flowing white dress. A large piece of 
	   intricately patterned fabric is draped over the side. In her right hand she holds 
	   the chain mooring the boat. Her expression is mournful. She stares at a crucifix 
	   lying in front of her. Beside it are three candles. Two have blown out.</p>
</canvas>

Test cv-002: drawFocusIfNeeded() method

The circle below must have a focus ring.

Code

var canvas2 = document.getElementById('drawFocusCanvas'),
    button = document.getElementById('drawFocusButton'),
    context2 = canvas2.getContext('2d');
						
context2.beginPath();
context2.arc(100, 100, 75, 0, 2 * Math.PI);
context2.fillStyle = '#ddd';
context2.fill();
						
button.focus();
context2.drawFocusIfNeeded(button);