Part 3: Canvas Background and Sprites
Background
- you will need to start a new canvas2.html
- Once in the file type the following script in image:
- click ctrl−s to save the file
Setting up a background image
- For this part we will keep working in the canvas2.html file
- You need to either download or copy an image addrees of the internet − for this assignment I will provide you a picture
- we need to Declare the variable: var background = new Image();
- We now need initialize the variable: background.src = "./CMS.jpeg";
- click ctrl−s to save the file
- To display the Background we will need to create a draw funtion and a function call
- click ctrl−s to save the file
- For this part we will keep working in the canvas2.html file
- You need to either download or copy an image addrees of the internet − for this assignment I will provide you a sprite
- we need to Declare the variable: var char = new Image();
- We now need initialize the variable: char.src = "./char.png";
- click ctrl−s to save the file
- To display the Sprite we will need to create a function call and add it our draw function
- Side not the x and y location of the sprite if from the top-left conner of the sprite not the center
- click ctrl−s to save the file
→ https://mrhorvathcompclasses.in/Canvas/CMS.jpeg ←
Creating a Sprite
→ https://mrhorvathcompclasses.in/Canvas/char.png →
You will emial me a copy of completed html lesson called canvas2.html file e:mail ghorvath@cheneysd.org
