https://github.com/mariusmonkam/twins-images-canvas

simple html canvas of presentation board with 2 images
https://github.com/mariusmonkam/twins-images-canvas

Last synced: 3 months ago
JSON representation

simple html canvas of presentation board with 2 images

• Host: GitHub
• URL: https://github.com/mariusmonkam/twins-images-canvas
• Owner: mariusmonkam
• Created: 2019-04-27T12:55:42.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-04-27T13:22:42.000Z (about 6 years ago)
• Last Synced: 2025-01-13T11:22:34.145Z (5 months ago)
• Language: HTML
• Size: 38.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# twins-images-canvas

simple html canvas of presentation board with 2 images

Create a html canvas of two images

1- Use your code-editor to create the file html , css an javascript

On the html file after rwite the html starte code and insert the canvas code on the body of the page

as follow  

2- Go to css file , center your canvas and resett the dimension as follow

#canvas{

    background-color: beige;

    border: double;

    margin-top: 5;

    padding-left: 0;

    padding-right: 0;

    margin-left: auto;

    margin-right: auto;

    display: block;

    width: 800px;

}

3- On javascript file 

 first draw the frame with the rectangle and the stroke 

 the draw the image and insert it inside the frame 

 with the following cordinate:

 ctx.drawImage(srcImg, x, y,w,h); where x and y represente the position

 w and h represente the width and height .

 

 

 Happy hacking!!!