I'm trying to input text into a html form field (button) which will then be displayed on the same page over an image. Any advice of how I could get the two talking to each other would be really appreciated.
<canvas id="myCanvas" width="900" height="600" style="border:1px solid #404040;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img =new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, 900, 600);
function myFunction() {
document.getElementById("line1").innerHTML;
var line1 = document.getElementById("line1").value;
var line2 = document.getElementById("line2").value;
var line3 = document.getElementById("line3").value;
}
//the code below positions the overlaying text on the image
ctx.font = "bold 36px Times";
ctx.fillStyle = "black";
ctx.fillText ("line1",400,325);
ctx.fillText ("line2",400,375);
ctx.fillText ("line3",400,425);
}
//this is the image
img.src= "bus_red.gif"
</script>
//the code below allows the user to input text into boxes
<div>
<form>
<label for="line1">Enter your text: </label>
<input type="text" autocomplete="off" id="line1" placeholder="line1"><br>
<label for="line2">Enter your text: </label>
<input type="text" autocomplete="off" id="line1" placeholder="line2"><br>
<label for="line3">Enter your text: </label>
<input type="text" autocomplete="off" id="line1" placeholder="line3"><br>
//Click the "click-me' button to return the text on the "HTML" button
<button onclick="myFunction()">Click me</button>
</form>
</div>
Try this. For the button, the element being displayed only stays if the user keep on holding the button. Thus I changed it to a radio box where you can style it into a button.
The button has been linked with the canva and the inserted in the different textbox are being displayed respectively.
Edit: I have added a reset code to reset the canva and also styled the two "buttons".
Tested and works
<canvas id="myCanvas" width="900" height="600" style="border:1px solid #404040;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
function myFunction() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img =new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, 900, 600);
}
//the code below positions the overlaying text on the image
ctx.font = "bold 36px Times";
ctx.fillStyle = "black";
ctx.fillText ( document.getElementById("line1").value ,400,325);
ctx.fillText ( document.getElementById("line2").value ,400,375);
ctx.fillText ( document.getElementById("line3").value ,400,425);
}
img.src= "images/image1.jpg"
function myFunction2() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
}
//this is the image
</script>
//the code below allows the user to input text into boxes
<div>
<form>
<label for="line1">Enter your text: </label>
<input type="text" autocomplete="off" id="line1" placeholder="line1"><br>
<label for="line2">Enter your text: </label>
<input type="text" autocomplete="off" id="line2" placeholder="line2"><br>
<label for="line3">Enter your text: </label>
<input type="text" autocomplete="off" id="line3" placeholder="line3"><br>
//Click the "click-me' button to return the text on the "HTML" button
<a id="input-button" onclick="myFunction()">Click me</a>
Reset
</form>
</div>
<style>
#input-button {
padding: 2em;
background-color: black;
color: #fff;
}
#input-reset {
padding: 2em;
background-color: black;
color: #fff;
text-decoration: none;
}
</style>
Related
I'm hoping someone can help. I'm doing a drawing app. I'm working on
adjusting the line width on the canvas using the slider. If a user
selects 2 on the slider then line width should be thin, 40 would be a
very thick line.
Many thanks in advance,
Filipe
This is my HTML
<div id="theLineWidthSection" style="float:right; margin-right:170px;
margin-top:-42px; position:relative;z-index:9999; cursor:pointer;
overflow:hidden;">
Size: <input type="range" id="theLineWidth" min="2" max="40"
value="2" title="Line width">
</div>
This is my Javascript
$('#theLineWidth').change(function () {
var canvas = document.getElementById('drawingCanvas');
var lineSize = document.getElementById('theLineWidth');
var mySize = lineSize.value;
lineSize.addEventListener('change', changeLineWidth);
function changeLineWidth(){
mySize = lineSize.value;
context.lineWidth = mySize;
context.lineWidth = lineSize.value;
}
});
When the slider is changed the linewidth doesn't change.
The problem is that you are not taking the canvas context before applying the line-width change. This should fix it:
var canvas = document.getElementById('drawingCanvas');
var context = canvas.getContext("2d")
var lineSize = document.getElementById('theLineWidth');
var mySize = lineSize.value;
$('#theLineWidth').change(function () {
mySize = lineSize.value;
context.lineWidth = mySize;
});
Also, take your variables out of the function. There is no need of redefining them each time the change event is fired.
This is a demo where I'm changing the linewidth on canvas using slider.
The event I'm using is input that fires when the value of input changes.
I hope it helps.
var canvas = document.getElementById('drawingCanvas');
var context = canvas.getContext("2d");
var mySize = 2;
//draw something on the canvas
draw();
theLineWidth.addEventListener("input",function () {
var mySize = theLineWidth.value;
// change the line width
context.lineWidth = mySize;
draw();
});
// a function that is drawing something on the canvas
function draw(){
//first clear the context
context.clearRect(0,0,canvas.width,canvas.height);
// next draw
context.beginPath();
context.moveTo(10,75);
context.lineTo(290,75);
context.stroke();
}
#theLineWidthSection {
float: right;
margin-right: 170px;
/* margin-top: -42px;*/
position: relative;
z-index: 9999;
cursor: pointer;
outline:1px solid;
/*overflow: hidden;*/
}
canvas{border:1px solid}
<div>
Size: <input type="range" id="theLineWidth" min="2" max="40"
value="2" title="Line width">
</div>
<canvas id="drawingCanvas"></canvas>
I am stuck with a code and my job is to keep on adding canvas when button is clicked. this canvas should also hold a circle. Whenever a button is clicked it should result in displaying a new canvas with a circle inside beside older ones(canvas that are created earlier). Please Help.
This is my code
The two canvases created are default on page and new ones should be created upon clicking the button
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fillText("Alex", 10, 50);
var d = document.getElementById("myCanvas1");
var ctx1 = d.getContext("2d");
ctx1.beginPath();
ctx1.arc(95,50,40,0,2*Math.PI);
ctx1.stroke();
ctx1.fillText("Clay", 10, 50);
</script>
<script>
function fun(){
var e = document.getElementById("myCanvas2");
var ctx2 = e.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();
window.alert();
}
</script>
<br><br>
<button type="button" onclick="fun()">+</button>
</body>
</html>
Alright, so what I did was I took part of your code(for the circle), and did what you asked!
in this JsFiddle (https://jsfiddle.net/jrhvcrtm/), When you click the button, you get a new div, with the same properties as the other one, with a circle inside.
Just use this in your own code, and if you didn't realize yet, it uses jQuery in it.
Here is a snippet:
var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
$('#button').click(function() {
var el = $("#test"),
newone = el.clone(true);
el.before(newone);//This line is added just for styling
});
$('#button').click(function() {
var e = document.getElementById("test");
var ctx2 = e.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();
window.alert();
});
#test {
height:100px;
width:200px;
border: 3px solid black;
margin-left: 50px;
margin-top: 50px;
}
#button {
height:50px;
width:50px;
border: 3px solid black;
margin-left: 200px;
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="button">
Click
</button>
<canvas id="test" class="test"></canvas>
Instead of var e = document.getElementById("myCanvas2"), create a new canvas, then append it to your body.
var e = document.createElement('canvas') // create new canvas
document.body.appendChild(e) // make it accessible on the DOM
var ctx2 = e.getContext("2d")
// remain the same code ...
You may also put all canvas in a <div id="canvases"></div> for a better management. Then the onclick listener will be as following code.
var e = document.createElement('canvas')
var canvasContainer = document.getElementById('canvases')
document.body.appendChild(canvasContainer)
var ctx2 = e.getContext("2d")
// remain the same code ...
That is my problem :
I have written javascript code to create a thumbnail when a user uploads an image. I would now like to add a feature which allows a user to click on an "X" which will then deleted the image.
this is my code :
var imageLoader = document.getElementById('fUpload2');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas2');
var ctx = canvas.getContext('2d');
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
document.getElementById("imageCanvas2").style.height = canvas.height;
document.getElementById("imageCanvas2").style.maxWidth = "200px";
document.getElementById("imageCanvas2").style.maxHeight = "200px";
document.getElementById("imageCanvas2").style.border = "1px solid #000";
}
img.src = event.target.result;
var alte= canvas.height;
}
reader.readAsDataURL(e.target.files[0]);
}
.image-upload-gal > input {
display: none;
}
<div class="well">
<form class="form-horizontal" role="form" method="post" action="/ServiceUpload.php" enctype="multipart/form-data">
<div class="form-group" style="padding:14px;">
<div class="image-upload-gal" >
<label for="fUpload2">
Add foto
</label>
<input type="file" name="fUpload" id="fUpload2" />
<br>
<canvas id="imageCanvas2" ></canvas>
</div>
</div>
<button class="btn btn-primary pull-right" type="submit" value="f_upload" name="up" style="margin-top: -20px;">Submit Photo</button>
</form>
</div>
and that is another code ( i need 2 code is long story :D )
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
.thumb {
height: 180px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
input{
display:none;
}
<div class="image-upload" >
<label for="upload">
Add foto
</label>
<input type="file" id="upload" name="fUpload" />
<input type="hidden" name="up" value="f_upload" />
<output id="list"></output>
</div>
<button class="btn btn-primary pull-right" type="submit" value="newpost" name="NewPost" style="margin-top: -10px;">Submit</button>
</form>
just add an onclick event on a span containing a "x"
<span id="deleteImage">X</span>
Add the on Click handler then clear the canvas as you haven't saved the image anywhere else in that code
document.getElementById("deleteImage").onclick = function(){
canvas.clearRect(0, 0, canvas.width, canvas.height);
}
Edited.
if you want to clear the canvas directly below is how.
canvas = document.getElementById("imageCanvas2");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
Hi Guys, I'm trying to solved this kind of form that when I clicked the submit button in a form the output will become image/picture and all the data that are in the fields will be compiled too in the image.
I would love and appreciate your kindness if you could help me to solve this kind of problem.
Please check image as my sample.
Client-side you can use canvas to draw a text as an image.
var canvas = document.querySelector('canvas');
document.querySelector('form').addEventListener('submit', function(event) {
var ctx = canvas.getContext('2d')
, line = 0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
[].forEach.call(event.srcElement.querySelectorAll('label'), function(label) {
ctx.fillText(label.textContent + label.querySelector('input').value, 20, (++line) * 20);
});
});
form, canvas { width: 500px }
canvas { height: 200px }
form > * { display: block }
form > * + * { margin-top: .5em; }
form input { width: 100% }
<form>
<label>Name: <input name="name"></label>
<label>Address: <input name="address"></label>
<button>draw</button>
</form>
<canvas></canvas>
Copy the textarea contents to a div, run html2canvas and upload the image via ajax:
$('#submit').click(function() {
var abc = $('#text1').val();
var def = $('#text2').val();
var ghi = $('#text3').val();
$('#container').html('<div class = text1>' + abc + '</div><div class = text2>' + def + '</div><div class = text3>' + ghi + '</div>');
html2canvas($('#container'), {
onrendered: function(canvas) {
myImage = canvas.toDataURL("image/png");
$('#image').append(canvas);
//$.ajax({
//data: myImage
// ....
}
});
});
#image {
border: 1px solid black;
margin: 10px;
width: 100px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<textarea id="text1">ABC</textarea>
<textarea id="text2">DEF</textarea>
<textarea id="text3">GHI</textarea>
<button id="submit">Submit</button>
<br>Your text will appear here ->
<br>
<div id="container"></div><br>
Your image will appear here ->
<br>
<div id="image"></div>
I'm tryin to change color on my squares without using jquery or CSS.
How can I change simultaneously all square color?
P.s.: I'm new in HTML5+JS.
Using this code I can change square color after click on the button. But I'd like to have a button that can change all squares already presented on canvas area.
HTML
<html>
<head>
<meta charset="utf-8">
<title>Paint Canvas</title>
</head>
<body>
<div id="container">
<canvas id="imageView" width="600" height="300" onclick="createRect(red, 20,20);"/>
</div>
<input type="button" value="Green" id="green" onclick="GreenRect()">
<input type="button" value="Red" id="red" onclick="RedRect()">
<input type="button" value="clear canvas" id="clear" onclick="ImgClr()">
</body>
</html>
CSS
canvas { border: 1px solid black;}
JavaScript
var canvas = document.getElementById("imageView");
var context = canvas.getContext("2d");
function createCircle(){
}
function createRect(fillColor, w, h) {
context.fillStyle = fillColor;
x = event.pageX;
y = event.pageY;
context.fillRect(x, y, w, h);
}
function GreenRect () {
context.fillStyle= 'green';
context.stroke();
}
function RedRect () {
context.fillStyle= 'red';
context.stroke();
}
function ImgClr () {
context.clearRect(0,0, 600, 300);
}
Canvas squares you are drawing are not "Objects" like in Javascript.
You cannot change their color, technically speaking.
What you can do, though, is redraw them all with another color. Which is what I suggest.
You have the right parameter here:
function createRect(fillColor, w, h)
So you just want to do a createRect('red', ...)