Skip to content

Latest commit

 

History

History
84 lines (60 loc) · 2.63 KB

README.md

File metadata and controls

84 lines (60 loc) · 2.63 KB
Raw

Text taken from the orioginal assignment.

Javascript Canvas

Introduction

When you want to do advanced animations, games, data visualizations, photo manipulation or real-time video processing in the browser you will need a canvas.

About this challenge

Repository javascript-canvas-intro
Type of challenge Learning
Duration 3 days

Learning objectives

What and why

  • What is canvas
  • What can be done with it
  • Why would we want to use it
  • What is a context
  • What is WebGL
  • What is a tainted canvas

How

  • How to get a context
  • How to draw lines, rectangles, text, images, ...
  • How to clear a canvas
  • How to make it interactive

Instructions

Setup

  • Create an HTML page called index.html
  • Create a repository
  • Don't forget a good readme 😉
  • Commit now, and often

Setup the canvas

  • Create an HTML page random.html
  • Link random.html in index.html
  • Add a canvas element
  • Make it fill the whole screen

Drawing

  • After 1 second, draw a red line from (x: 15, y: 60) to (x: 50, y: 150) with a width of 5 pixels
  • On page load, make the background black without using css
  • After 2 seconds add an image in a random location
  • Make the image twice as big
  • After 3 seconds add some text somewhere, again without using html or css
  • After 4 seconds, clear the canvas
  • After 5 seconds draw a circle somewhere
  • After 6 seconds, every second, it should add a random line, in a random color, with a random width between 1 and 5 pixels
  • Now make it add a line every 10ms

Interactive

  • Create a new file called interactive.html
  • Link it in the index and add some minor styling to the index
  • When we move the mouse, a big yellow-filled circle should appear at the postion of the mouse using a full screen canvas like in the last excercise
  • Now make the previous ones disappear when we draw a new one
  • Whenever space is pressed, a black box should show, it should be gone when space is not pressed

requestAnimationFrame or setInterval(1000/60)

  • If we press down space, move the mouse and then release space it should show the black box the whole time we were pressing space, without flickering and there should be a yellow circle following our mouse

Text input

  • When we type something on the keyboard, it should appear on the canvas, and it should stay there until we refresh the page

Bonus

  • Add more info the index page
  • Save the text we type in localStorage and display it on pageload
  • Add a delete button

Result

https://taggar.github.io/javascript-canvas-intro/