The goal of the code is as follows:
upload an image to a file
the user draws 4 points by clicking on the image
the x, y coordinates of the points are saved in an array
Now I have made a reset button in case the user is wrong to indicate the points.
The reset button should erase the array and reload the original image in the canvas.
I tried to invoke the function again but does not reload the image.
I'm new in javascript.
Anyone can help me?
Thanks in advance
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style type="text/css">
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<h2>Title
<p id="demo"></p>
</h2>
<div class="card">
<div class="card-header">
<input type='file' id="fileUpload"/>
<button type="button" class="btn btn-secondary" id="resetButton" onclick="resetPoint()">Reset</button>
</div>
<div class="card-body">
<canvas id="canvas" width="500px" height="500px"></canvas>
</div>
<div class="card-footer">Footer</div>
</div>
<script>
var fileUpload = document.getElementById('fileUpload');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
function readImage() {
if ( this.files && this.files[0] ) {
var percorso = this.files[0]
var FR= new FileReader();
FR.onload = function(e) {
var img = new Image();
img.src = e.target.result;
img.onload = function() {
ctx.drawImage(img, 0, 0,500,500);
};
};
FR.readAsDataURL( this.files[0] );
}
}
fileUpload.onchange = readImage;
var coordinate=[];
canvas.onclick = function(e) {
if (coordinate.length < 4) {
var x = e.offsetX;
var y = e.offsetY;
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.arc(x, y, 3, 0, Math.PI * 2);
ctx.fill();
ctx.font="25px Arial";
ctx.fillText(coordinate.length+1,x+2, y+2);
var coordinataN=[x,y];
coordinate.push(coordinataN);
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
}
};
function resetPoint() {
readImage()
coordinate.length = 0;
alert("Points deleted");
}
</script>
</body>
</html>
You need to clear the canvas first, then do your redrawing of the image.
You can clear the canvas by doing the following:
ctx.clearRect(0, 0, canvas.width, canvas.height);
You can add this line at the begining of your resetPoint() function.
Now that you want to keep the image, you need to save the uploaded image file somewhere so you can redraw it. I suggest making a variable outside your resetPoint() function:
var files;
and then at the beginning of your resetPoint() function add:
files = this.file
Aswell as change all the references to this.files to files.
See the snippet below for a working example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style type="text/css">
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<h2>Title
<p id="demo"></p>
</h2>
<div class="card">
<div class="card-header">
<input type='file' id="fileUpload"/>
<button type="button" class="btn btn-secondary" id="resetButton" onclick="resetPoint()">Reset</button>
</div>
<div class="card-body">
<canvas id="canvas" width="500px" height="500px"></canvas>
</div>
<div class="card-footer">Footer</div>
</div>
<script>
var fileUpload = document.getElementById('fileUpload');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var files; // Add this
var img = new Image();
function readImage() {
files = this.files; // Set a reference to this.files (the image)
if (files && files[0] ) { // Update this line to only reference the files variable
var percorso = files[0]; // And this line
var FR= new FileReader();
FR.onload = function(e) {
img.src = e.target.result;
img.onload = function() {
ctx.drawImage(img, 0, 0,500,500);
};
};
FR.readAsDataURL( files[0] ); // And this line
}
}
fileUpload.onchange = readImage;
var coordinate=[];
canvas.onclick = function(e) {
if (coordinate.length < 4) {
var x = e.offsetX;
var y = e.offsetY;
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.arc(x, y, 3, 0, Math.PI * 2);
ctx.fill();
ctx.font="25px Arial";
ctx.fillText(coordinate.length+1,x+2, y+2);
var coordinataN=[x,y];
coordinate.push(coordinataN);
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
}
};
function resetPoint() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
readImage()
coordinate.length = 0;
alert("Points deleted");
}
</script>
</body>
</html>
Related
iam trying to force my html button to draw a circle on canvas area but I dont know what Iam doing wrong. Can some1 point it for me?
JavaScript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Funkcja
function drawCircle(size,xPos,Ypos,colour){ //draw circle
var xPos = Math.floor(Math.random() * 501);
var yPos = Math.floor(Math.random() * 501);
var size = Math.floor(Math.random() * 100);
var colour = '#' + Math.random().toString(16).substring(4); // random colour;
ctx.beginPath();
ctx.arc(xPos,yPos,size,0,2*Math.PI);
ctx.fillStyle = colour;
ctx.fill();
}
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="site.css">
<script type="text/javascript" src="site.js"></script>
</head>
<body>
<button style="margin:0;padding:0;position:relative;left:50px;top:50px;" onclick="drawCircle()">Draw Random Circle</button><br>
<div style = "width:500px; height:150px; margin:0 auto; padding:5px;">
<canvas id = "canvasArea" width = "500" height = "550" style = "border:2px solid black"></canvas>
</div>
</body> </html>
As Diego sais: wrong id.
Also, you better use HTML elements inside a function that's only triggered after the page is loaded.
Edit: Math.random produces a number between 0 and 1. So let's skip the "0."
so a substring from character 2, 6 characters long.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="site.css">
<script type="text/javascript">
// global variables
var canvas;
var ctx;
// You do not have permission to read from ( nor write to ) HTML elements before the DOM is loaded.
window.onload = function() {
canvas = document.getElementById("canvasArea");
ctx = canvas.getContext("2d");
}
// Funkcja
function drawCircle(size, xPos, Ypos, colour) { //draw circle
var xPos = Math.floor(Math.random() * 501);
var yPos = Math.floor(Math.random() * 501);
var size = Math.floor(Math.random() * 100);
var colour = '#' + Math.random().toString(16).substr(2,6); // random colour;
// var colour = '#' + Math.random().toString(16).substring(4); // random colour;
ctx.beginPath();
ctx.arc(xPos, yPos, size, 0, 2 * Math.PI);
ctx.fillStyle = colour;
ctx.fill();
}
</script>
</head>
<body>
<button style="margin:0;padding:0;position:relative;left:50px;top:50px;" onclick="drawCircle()">Draw Random Circle</button><br>
<div style="width:500px; height:150px; margin:0 auto; padding:5px;">
<canvas id="canvasArea" width="500" height="550" style="border:2px solid black"></canvas>
</div>
</body>
</html>
You got the wrong ID in line:
var canvas = document.getElementById("myCanvas");
It must be:
var canvas = document.getElementById("canvasArea");
And thats it.
var canvas = document.getElementById("canvasArea");
var ctx = canvas.getContext("2d");
// Funkcja
function drawCircle(size,xPos,Ypos,colour){ //draw circle
var xPos = Math.floor(Math.random() * 501);
var yPos = Math.floor(Math.random() * 501);
var size = Math.floor(Math.random() * 100);
var colour = '#' + Math.random().toString(16).substring(4); // random colour;
ctx.beginPath();
ctx.arc(xPos,yPos,size,0,2*Math.PI);
ctx.fillStyle = colour;
ctx.fill();
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="site.css">
<script type="text/javascript" src="site.js"></script>
</head>
<body>
<button style="margin:0;padding:0;position:relative;left:50px;top:50px;" onclick="drawCircle()">Draw Random Circle</button><br>
<div style = "width:500px; height:150px; margin:0 auto; padding:5px;">
<canvas id = "canvasArea" width = "500" height = "550" style = "border:2px solid black"></canvas>
</div>
</body> </html>
I want to add several different elements (image via canvasAux) to an array and draw them on canvas, but when adding the second item, the image of the first item is also changed (so on). How to solve this so that each element can have different images?
Example below:
Steps: Click "add", then click "change" and "add" again (or "add", "add", "change" and "add" again).
How to keep the first element with the Google logo and the others with the Yahoo logo (or any other)?
window.onload = function() {
var canvas = document.getElementById("canvas");
var canvasAux = document.getElementById("canvasAux");
var context = canvas.getContext("2d");
var contextAux = canvasAux.getContext("2d");
var add = document.getElementById("add");
var change = document.getElementById("change");
var elements = [];
function drawElements() {
context.clearRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i < elements.length; i++) {
context.drawImage(elements[i].image, elements[i].x, elements[i].y, elements[i].width, elements[i].height);
}
}
var imageDefault = new Image();
imageDefault.src = "https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
imageDefault.onload = function() {
contextAux.drawImage(imageDefault, 0, 0, canvasAux.width, canvasAux.height);
}
change.addEventListener("click", function() {
var imageAux = new Image();
imageAux.src = "https://s.yimg.com/zz/nn/lib/metro/g/my/yahoo_en-US_f_p_190x45_2x.png";
imageAux.onload = function() {
contextAux.clearRect(0, 0, canvasAux.width, canvasAux.height);
contextAux.drawImage(imageAux, 0, 0, canvasAux.width, canvasAux.height);
}
});
var x = 0;
add.addEventListener("click", function() {
var element = {
image: canvasAux,
width: 163,
height: 191,
x: x,
y: 0
};
elements.push(element);
x += 170;
drawElements();
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="background-color: #333;">
<button id="add">Add</button> <button id="change">Change</button>
<canvas id="canvas" width="600" height="600" style="border: 1px solid #ccc;"></canvas>
<canvas id="canvasAux" width="163" height="191" style="border: 1px solid #ccc;"></canvas>
</body>
</html>
I solved the problem just creating a new canvas element in every add click:
window.onload = function() {
var canvas = document.getElementById("canvas");
var canvasAux = document.getElementById("canvasAux");
var context = canvas.getContext("2d");
var contextAux = canvasAux.getContext("2d");
var add = document.getElementById("add");
var change = document.getElementById("change");
var elements = [];
function drawElements() {
context.clearRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i < elements.length; i++) {
context.drawImage(elements[i].image, elements[i].x, elements[i].y, elements[i].width, elements[i].height);
}
}
var imageDefault = new Image();
imageDefault.src = "https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
imageDefault.onload = function() {
contextAux.drawImage(imageDefault, 0, 0, canvasAux.width, canvasAux.height);
}
change.addEventListener("click", function() {
var imageAux = new Image();
imageAux.src = "https://s.yimg.com/zz/nn/lib/metro/g/my/yahoo_en-US_f_p_190x45_2x.png";
imageAux.onload = function() {
contextAux.clearRect(0, 0, canvasAux.width, canvasAux.height);
contextAux.drawImage(imageAux, 0, 0, canvasAux.width, canvasAux.height);
}
});
var x = 0;
add.addEventListener("click", function() {
var imagesss = document.createElement("canvas");
imagesss.width = canvasAux.width;
imagesss.height = canvasAux.height;
var contextsss = imagesss.getContext("2d");
contextsss.drawImage(canvasAux, 0, 0, imagesss.width, imagesss.height);
var element = {
image: imagesss,
width: 163,
height: 191,
x: x,
y: 0
};
elements.push(element);
x += 170;
drawElements();
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="background-color: #333;">
<button id="add">Add</button> <button id="change">Change</button>
<canvas id="canvas" width="600" height="600" style="border: 1px solid #ccc;"></canvas>
<canvas id="canvasAux" width="163" height="191" style="border: 1px solid #ccc;"></canvas>
</body>
</html>
I have a drawing app which consists of a container with a background image in grayscale and over it, there's another image (the same but not in grayscale).
When I draw on my image, I would to erase where I drawn or turn in grayscale (to reproduce the image in background).
How can I achieve that ?
Here is my code :
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#wrapper {
width: 600px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
background-image: url('elephant-nb-400.jpg');
}
</style>
</head>
<body>
<div id="wrapper">
<canvas width="600" height="400"></canvas>
</div>
<script>
window.onload = function() {
var wrapper = document.querySelector("#wrapper");
var canvas = document.querySelector("#wrapper canvas");
var context = canvas.getContext("2d");
var image = document.createElement("img");
image.setAttribute("src", "elephant-400.jpg");
image.onload = function() {
context.drawImage(image, 0, 0, 600, 400);
};
var positionsX = new Array();
var positionsY = new Array();
var movements = new Array();
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
var isErasing;
canvas.addEventListener("mousedown", function(e) {
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
isErasing = true;
addPositions(mouseX, mouseY);
draw();
});
canvas.addEventListener("mousemove", function(e) {
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
if(isErasing) {
addPositions(mouseX, mouseY, true);
draw();
}
});
canvas.addEventListener("mouseup", function(e) {
isErasing = false;
});
var addPositions = function(x, y, isMoving) {
positionsX.push(x);
positionsY.push(y);
movements.push(isMoving);
}
var draw = function(){
//context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
for(var i=0; i < positionsX.length; i++) {
context.beginPath();
if(movements[i] && i){
}else{
}
context.lineTo(positionsX[i], positionsY[i]);
context.closePath();
context.stroke();
}
}
}
</script>
</body>
My problem is solved.
You need to get the image data : var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
In function draw(), you need to add : context.putImageData(imageData, 0, 0, positionsX[i]-1, positionsY[i], 20, 20); after context.moveTo(positionsX[i-1], positionsY[i-1]);and context.moveTo(positionsX[i]-1, positionsY[i]);
Why does the image not display to the canvas in this example?
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
/*
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
screen.lockOrientation('landscape');
if (lockOrientation("landscape-primary")) {
screen.lockOrientation('landscape');
}
*/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 10;
var y = 10;
var width = 470;
var height = 310;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</head>
<body>
<canvas id="myCanvas" width="470" height="310" style="border:5px solid #123456;"></canvas>
</body>
</html>
You need to wait for the document to load before trying to select elements in the page.
Try wrapping your code like this:
window.onload = function() {
// your code goes here
};
I'm really pretty new to code. I'm trying to make a paint app that will work on desktop and mobile. I had it working fine on desktop using JavaScript but then to get it to work on mobile it seemed like JQuery mobile was a recommended method. I'm converting it to JQuery and had the maint working with .mousedown, .mouseup, etc. but when I changed to to .vmousedown, .vmouseup, etc. to have it work with touch I get an error which I can't seem to resolve.
Uncaught TypeError: Object [object Object] has no method 'vmousedown'
I've seen other people with similar issues but I'm having a hard time making it work for me.
JSFiddle - http://jsfiddle.net/mquickel/dehAD/79/
HTML Snippet
<html>
<head>
<link rel="stylesheet" type="text/css" href="colorCSS2.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body data-role="page">
<div id="container">
<div id="sketch" data-role="content">
<canvas id="paint" style="z-index: 0; position:absolute;" height="600px" width="600px"></canvas>
<canvas id="layer2" style="z-index: 1; position:absolute;" height="600px" width="600px"></canvas>
</div>
JS Snippet
document.getElementById( "container" ).onmousedown = function(event){
event.preventDefault();
}
var layer2 = document.getElementById("layer2");
var ctx2 = layer2.getContext("2d");
var imageObj = new Image();
/* Loading the Image*/
imageObj.onload = function() {
ctx2.drawImage(imageObj, 0, 0);
};
imageObj.src = 'https://lh5.googleusercontent.com/-P5ucC3TjCLU/UjHE0rENTaI/AAAAAAAAAts/mH2A_OORkQY/s800/color.png';
(function() {
var canvas = document.getElementById('paint');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
var cont = document.getElementById('container');
var mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};
/* Mouse Capturing Work */
$(cont).mousemove (function(e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
});
/* Drawing on Paint App */
ctx.lineWidth = 20;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = brushColor;
$(cont).vmousedown(function(e) {
console.log("hi");
$(cont).vmousemove (onPaint);
});
$(cont).vmouseup (function() {
console.log("up");
$(cont).unbind ('vmousemove', onPaint);
});
var onPaint = function() {
ctx.beginPath();
ctx.moveTo(last_mouse.x, last_mouse.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.closePath();
ctx.stroke();
};
}());