HomeworkLib
Question

HTML Canvas: I have given my small html + js mix code below. By this program-...

HTML Canvas: I have given my small html + js mix code below. By this program- I can just draw line, but after drawing any image I want to save the "image " on my desktop. I understand, I have to make a "button" to SAVE it and later if I want to load the picture, then I have to make a button on the webpage to "LOAD". But I am unable to understand the function I should write for save and load. Could you please write it and make comment also, so that I can understand the function. Hope to get help!

<!DOCTYPE html>

<html>

<head>

<script>

var start = 0;

var c;

var ctx;

function f(event) {

// var c=document.getElementById("can");

ctx = c.getContext("2d");

if(start ==1) {

ctx.moveTo(event.offsetX, event.offsetY);

start =0;

}

else {

var p = document.getElementById("demo");

p.innerHTML= "x="+event.offsetX;

// ctx.moveTo(0,0);

ctx.lineTo(event.offsetX, event.offsetY);

ctx.stroke();

}

}

function g() {

start =1;

}

function s(){

c=document.getElementById("can");

ctx = c.getContext("2d");

}

</script>

</head>

<body>

<button type= "button"

onclick="s()">START </button>

<br>

<canvas id="can"

width = "500" height= "300"

style="background-color:powderblue;"

onmousedown="f(event)"> </canvas>

<p id="demo"> </p>

<button type= "button"

onclick = "g()"> New Start Point </button>

</body>

</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

<!DOCTYPE html>

<html>

<head>

<script>

var start = 0;

var c;

var ctx;

function f(event) {

// var c=document.getElementById("can");

ctx = c.getContext("2d");

if (start == 1) {

ctx.moveTo(event.offsetX, event.offsetY);

start = 0;

}

else {

var p = document.getElementById("demo");

p.innerHTML = "x=" + event.offsetX;

// ctx.moveTo(0,0);

ctx.lineTo(event.offsetX, event.offsetY);

ctx.stroke();

}

}

function g() {

start = 1;

}

function s() {

c = document.getElementById("can");

ctx = c.getContext("2d");

}

Save_img = function (el) {
var image = can.toDataURL("image/jpg");// method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG)
el.href = image;//dynamicaly create href tag for anchor tag element
window.location.reload();//after download reload the page
};
</script>

</head>

<body>

<button type="button"
onclick="s()">
START
</button>

<br>

<canvas id="can"
width="500" height="300"
style="background-color:powderblue;"
onmousedown="f(event)"></canvas>

<p id="demo"> </p>
<a id="Save" download="myImage.jpg" href="" onclick="Save_img(this);">Save And Load</a>
<button type="button"
onclick="g()">
New Start Point
</button>

</body>

</html>

0 0
Add a comment
Know the answer?
Add Answer to:
HTML Canvas: I have given my small html + js mix code below. By this program-...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • HTML , Javascript Canvas problem: could you pleaseeee help me to do these things- suppose, user...

    HTML , Javascript Canvas problem: could you pleaseeee help me to do these things- suppose, user draw a picture, then that picture(lines on Canvas) will be saved as commands, so when the user will refresh the webpage or when I will execute the code, then when I will press the "load" button, the last picture which I made will come on the canvas from localStorage. <!DOCTYPE html> <html> <head> <script> var commands = []; var start = 0; var c;...

  • <!DOCTYPE html> <html> <body> <h1>The onclick Event</h1> <p>The onclick event is used to trigger a function...

    <!DOCTYPE html> <html> <body> <h1>The onclick Event</h1> <p>The onclick event is used to trigger a function when an element is clicked on.</p> <p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p> <button onclick="myFunction()">Click me</button> <p id="demo"></p> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; } </script> </body> </html> in this code when I press chick me button the show me hello world, I need show hello world in another page how...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • I am trying to create a slide show using JavaScript. This is what I have so...

    I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • I have a button that increases by one each time it is pressed. I'm still confused...

    I have a button that increases by one each time it is pressed. I'm still confused on how to position things. If I wanted to move this to the middle right of the page, how would I do that? Here's my code: <html> <head> <title>Counter</title> </head> <body> <div id="counter"></div> <button onclick="increase()">Increase</button> <script> var counter = 0; var counter_div = document.getElementById('counter'); counter_div.innerText = counter; function increase() { counter_div.innerText = ++counter; return false; } </script> </body> </html>

  • Given a starting sphere code, modify the Java and HTML code to create multiple spheres that...

    Given a starting sphere code, modify the Java and HTML code to create multiple spheres that will rotate in different positions at different speeds. basicSphere.js: "use strict"; var canvas; var gl; var numTimesToSubdivide = 3; var index = 0; var pointsArray = []; var va = vec4(0.0, 0.0, -1.0,1); var vb = vec4(0.0, 0.942809, 0.333333, 1); var vc = vec4(-0.816497, -0.471405, 0.333333, 1); var vd = vec4(0.816497, -0.471405, 0.333333,1); var program; var program1; function triangle(a, b, c) {    pointsArray.push(a);...

  • I am working on a normal javascript program where i have to take two names and...

    I am working on a normal javascript program where i have to take two names and put them in array and print out in sorted order.But,when the user clicks the print button it should show the output,but if user clicks second time,it should start again(basically reload the page).I have done the part about userinput and sorting and printing,but couldn't get the function of when user clicks button second time. <!DOCTYPE html> <html> <body> <input type="text" id="Name1" value=""><br> <input type="text" id="Name2"...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • I created an Html with tabs, then how do I import the constant character content of...

    I created an Html with tabs, then how do I import the constant character content of a JS into one of these tabs without editing that JS file? here is my page： <!DOCTYPE html> <html> <body>     <div id="main">         <span class="tab">             <button class="current">News</button>             <button>Create</button>             <button onclick="about()">About</button>             <button>Login</button>         </span>         <div class="con" style="display: block"> For news content</div>         <div class="con">For create content</div>         <div class="con" id="about">For about content</div>     </div> </body> <script type="text/javascript" src='strings.js'></script> <script>     var box = document.getElementById('main');     var btns = document.getElementsByTagName('button');     var divs =...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT