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>...
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>...
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"...
Javascript on implementing dynamic calculation using a form. How do I get the text in the yellow box to display "You can play FGO!" when all yeses are checked, or "You cannot play FGO!" otherwise? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Form</title> <link rel="stylesheet" href="css\survey.css"> <script src="js\survey.js"></script> </head> <body> <form id="part1"> <fieldset> <legend>Can you play FGO?</legend> <p>Do you have a smartphone?: ...