The document discusses playing a game of chess with Professor Falken and includes a greeting. It also provides an overview of the Canvas API in HTML5 for 2D drawing, including common methods, properties and drawing contexts. Finally, it discusses loading resources and getting user input to update a game world and draw the game world each frame in a game loop.

10. demo

12. demo

14. GREETINGS PROFESSOR FALKEN.
WOULD YOU LIKE TO PLAY A
GAME OF CHESS?
█

17. Canvas on One Canvas!
shadowOffsetX font
save
textAlign
restore shadowOffsetY
textBaseline
shadowBlur
fillText
scale shadowColor strokeText
rotate TextMetrics measureText
translate clearRect
transform fillRect ImageData createImageData
setTransform strokeRect ImageData createImageData
ImageData getImageData
globalAlpha beginPath putImageData
globalCompositeOperation closePath
moveTo
strokeStyle lineTo addColorStop
fillStyle quadraticCurveTo
CanvasGradient bezierCurveTo
createLinearGradient width
arcTo
CanvasGradient rect
createRadialGradient width
arc
CanvasPattern createPattern height
fill CanvasPixelArray data
stroke
lineWidth clip length
lineCap isPointInPath
lineJoin getter
miterLimit setter
drawFocusRing
drawImage
Via Jatinder Mann – MIX11

18. U haz an old
browser

19. <canvas id="myCanvas" width="200" height="200">
No canvas support.
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(30, 30, 50, 50);
</script>

20. demo

22. Load content when they start
Initialize Get User
Update the game world Engine Load Resources Input
Draw the game world
Calculate
Test Criteria
Give
Free Resources FeedBack
22

26. demo

30. "Code for touch, get mouse and pen for free!"

33. demo

37. // Application manifest capabilities required to access camera and microphone
<Capabilities>
<DeviceCapability Name="webcam" />
<DeviceCapability Name="microphone" />
</Capabilities>

38. id="message"
id="imagedisplay"
type="text/javascript">
// Step 1: Invoke the camera capture UI for snapping a photo
var captureUI = new Windows.Media.Capture.CameraCaptureUI();
captureUI.captureFileAsync(Windows.Media.CameraCaptureUI.Mode.photo).
then(function(capturedItem) {
if (capturedItem) {
// Step 2: Display the photo
document.getElementById("imagedisplay").src = URL.createObjectURL(capturedItem);
} else {
document.getElementById("message").innerHTML = "User didn’t capture a photo";
}
});

39. demo

42. demo

46. demo