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>
<!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>
HTML Canvas: I have given my small html + js mix code below. By this program-...
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 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 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 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: 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"...
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);...
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 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 =...
How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2> <center> Average: </h2> <h3> <center> Rate the following: </h2> <h3> <center> Rating Criteria: <br> Developing (0-5), Competent (6-10), Accomplished (10-15); </h3> <center> Judge Name: <input type="text" id="judge"> <br> <br> <center> 1. Articulate requirements and design of the project: <input type="text" id="num1"> <br> <br> 2. Plan the solution and implement the project: <input type="text" id="num2"> <br> <br> 3....
trying to get this html to calculate tax values, useing a js library file, <script type="text/javascript"> { var number; function Icometace(income, itemized) // Assynes: income .=0, itemzed .=0 // Returns: flat tax (13%) due after deductions { var deduction, taxableIcome, total tax; deduciton= Math.max(itermized, 4150): taxableIncome = Math.max(income - debuction, o); toatltax = 0.13*tableTincome return totaltax; } *^js code***\/ html code* <html> <head> <title> taxes </title> <script type="text/javascript"> { var number; function Icometace(income, itemized) // Assynes: income .=0, itemzed...