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;
var ctx ;
var i=0;
function h() {
//get the commands out of local storage.
//var command=["moveTo", 250, 150, "lineTo", 100, 70, "lineTo", 10,
200, "lineTo", 10, 29];
for(i=0; i<commands.length; i += 3) {
if (commands[i]=="moveTo")
ctx.moveTo(commands[i+1], commands[i+2]);
else if (commands[i]=="lineTo")
ctx.lineTo(commands[i+1], commands[i+2]);
}
ctx.stroke();
}
function sv() {
localStorage.setItem("test",commands);
var c = localStorage.getItem("test"); //load button
var p = document.getElementById("demo"); //load button
c = c.split(","); // split by , as we have to stringify
p.innerHTML = c;
var can = document.getElementById("can");
var ctx = can.getContext("2d");
}
function f(event) {
if (start==1) {
ctx.moveTo(event.offsetX, event.offsetY);
start = 0;
commands.push("moveTo");
commands.push(event.offsetX);
commands.push(event.offsetY);
}
else {
var p = document.getElementById("demo");
//ctx.moveTo(0,0);
ctx.lineTo(event.offsetX, event.offsetY);
//put the lineTo into commands: commands.push(......
commands.push("lineTo");
commands.push(event.offsetX);
commands.push(event.offsetY);
ctx.stroke();
}
p.innerHTML = commands;
}
function g() {
start=1;
}
function s() {
c = document.getElementById("can");
ctx = c.getContext("2d");
start=1;
}
</script>
</head>
<body>
<button type="button"
onclick="s()">START</button>
<br></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>
<button type="button"
onclick="sv()">SAVE</button>
<button type="button"
onclick="h()">LOAD</button>
</body>
</html>
Hi Student,
I have modified your code and It is successfully loaded last saved picture.
Waiting for (y).
<!DOCTYPE html>
<html>
<head>
<script>
var commands = [];
var start = 0;
var c;
var ctx ;
var i=0;
function h() {
//get the commands out of local storage.
//var commands=["moveTo", 250, 150, "lineTo", 100, 70, "lineTo",
10, 200, "lineTo", 10, 29];
var commands=localStorage.getItem("test");
commands = commands.split(",");
var ctx = can.getContext("2d");
for(i=0; i<commands.length; i += 3) {
if (commands[i]=="moveTo")
ctx.moveTo(commands[i+1], commands[i+2]);
else if (commands[i]=="lineTo")
ctx.lineTo(commands[i+1], commands[i+2]);
}
if(typeof ctx !=='undefined')
{
ctx.stroke();
}
}
function sv() {
localStorage.setItem("test",commands);
var c = localStorage.getItem("test"); //load button
var p = document.getElementById("demo"); //load button
c = c.split(","); // split by , as we have to stringify
p.innerHTML = c;
var can = document.getElementById("can");
var ctx = can.getContext("2d");
}
function f(event) {
if (start==1) {
ctx.moveTo(event.offsetX, event.offsetY);
start = 0;
commands.push("moveTo");
commands.push(event.offsetX);
commands.push(event.offsetY);
}
else {
var p = document.getElementById("demo");
//ctx.moveTo(0,0);
if (typeof ctx !== 'undefined')
{
ctx.lineTo(event.offsetX,
event.offsetY);
//put the lineTo into commands:
commands.push(......
commands.push("lineTo");
commands.push(event.offsetX);
commands.push(event.offsetY);
ctx.stroke();
}
}
if(typeof p !== 'undefined')
{
p.innerHTML = commands.join("
");
}
}
function g() {
start=1;
}
function s() {
c = document.getElementById("can");
ctx = c.getContext("2d");
start=1;
}
</script>
</head>
<body>
<button type="button"
onclick="s()">START</button>
<br></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>
<button type="button"
onclick="sv()">SAVE</button>
<button type="button"
onclick="h()">LOAD</button>
</body>
</html>
HTML , Javascript Canvas problem: could you pleaseeee help me to do these things- suppose, user...
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...
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...
<!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"...
<!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...
Could you please help me write a Javascript code that will show a smiley face picture when I click the button. The picture should not display until the button is pressed. Here is my attempt at the code. It does not work. Please keep the code as simple as you can as I am new to coding. Please also use the <div> tag if possible, onclick and use the getElementById. Thank you <html> <body> <img id="exampleImage" src="smileyFace.png" /> <button onclick="pushButton()">Try...
Write a html javascript program to do the following: the user inputs a number, for example, 50 user presses a button, labeled START the program creates 50 random buttons around the browser window each button should be placed at a random location each button should be labeled with a random number between 1 and 50 add the following features every 2 seconds, move each button around by increment or decrementing its location if the user clicks on a button, change...
This question relates to Javascript. Could you please show me why my code is not working? I want to create 2 text boxes and have the user enter something into both of them. If the text entered into both boxes is identical the a green message is made visible. If the boxes are different a red message is made visable. Please keep it simple because I am new to javascript. <html> <head> <title></title> <script>...
in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 5 Hands-on Project 5-2 Author: Date: Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hands-on Project 5-2</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 5-2 </h1> </header> <article> <h2>Change of address form</h2> <form> <fieldset id="contactinfo"> <label for="addrinput"> Street Address </label> <input type="text" id="addrinput" name="Address" /> <label for="cityinput"> City </label> <input type="text" id="cityinput" name="City"...
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>...
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 =...