I have a textarea and canvas. The user is able to drag image onto the canvas and change different background images. Now I need to be able to have a section at the bottom of canvas that will display text from textarea.
<canvas id="canvas" width="640" height="280"></canvas>
<div id="text">
<textarea id="write_whatever">Write 4 lines to describe yourself.</textarea>
<div id="button_to_add"></div>
</div>
Here's the jsfiddle of what i currently have http://jsfiddle.net/D4zw4/50/
Here's what I am trying to achieve, but instead of key up it's with button click and it should be at the bottom of the canvas http://jsfiddle.net/m1erickson/NuaHp/
Anyone know how I could achieve this or done this before? Thanks in advance :)
Something like this?
$('#button_to_add').on('click', 'button', function () {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var text = $('#write_whatever').val();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#3e3e3e";
ctx.font = "16px Arial";
ctx.fillText(text, 20, canvas.height - 20);
});
http://jsfiddle.net/D4zw4/51/
Related
Would like to ask if there's a way for transferring <canvas> contents to another <div>. So that after putting the signature, it will be previewed on the inside of the <div> it was transferred to.
I've used this library https://github.com/szimek/signature_pad on our previous project and the signature looks real, like it was written by a pen.
This library can save the signature to a file, so what I did on our previous project is once I submit the form, the signature will be saved and it will be previewed by attaching the source file to an <img> element.
What I would like to do is I have a <button> that will show a modal that contains a signature pad and once the modal is closed, the signature will be transferred to another <div> wherein its size will shrink depending on the div's size without having to save the signature on a file.
Thanks.
Take a look at HTMLCanvasElement.toDataURL. This will give you an image of the canvas as a Data URI, which you can then add to your page as an image.
Here's a simple example:
let canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d');
// Draw something
ctx.fillStyle = "lightgray";
ctx.fillRect(0, 0, 200, 100);
ctx.fillStyle = 'orange';
ctx.fillRect(20, 20, 160, 60);
ctx.fillStyle = 'black';
ctx.font = "50px monospace";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("image", 100, 50);
// Make the image and put it in the output
let uri = canvas.toDataURL('image/png'),
outdiv = document.querySelector('#out'),
outimg = new Image();
outimg.src = uri;
outdiv.appendChild(outimg);
<div style="display: inline-block;">
<h6>Canvas with border</h6>
<canvas width="200" height="100"
style="border: 1px solid black;">
</canvas>
</div>
<div style="display: inline-block;">
<h6>Output image in a <code>div</code></h6>
<div id="out"></div>
</div>
Having the following example where on a canvas are drew two different lines when pressing two buttons, how can I make the second button clear the old line and draw another?
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<button onclick="draw()">first</button>
<button onclick="draw2()">second</button>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "red";
function draw(){
ctx.moveTo(0,0);
ctx.lineTo(100,200);
ctx.stroke();
}
function draw2(){
ctx.clearRect(0, 0, c.width, c.height);
ctx.moveTo(100,0);
ctx.lineTo(0,200);
ctx.stroke();
}
</script>
I am using clearRect function, to clear the canvas, but when stroke is called on the second drawing, the first one is redrawn.
You have to call .beginPath() to clear out the current path and start a new one. In your case, it looks like you can do that at the beginning of each of your two functions.
Is there a native solution that provides a handle in the corner of my HTML5 canvas similar to that in a default <textarea> element.
<textarea>resizeable</textarea>
I assume this will clear the canvas and will require a redraw as this is the case when resizing the canvas programmatically with canvas.width and canvas.height.
I looked around and found nothing, but wanted to check before rolling my own. If anyone is sure that there is no "easy" way, then that is a perfectly acceptable answer. Thanks!
The best I could come up with was use jQueryUI Resizable like so
jsFiddle : https://jsfiddle.net/n24dbaw9/
Html
<div class="resizable">
<canvas id="myCanvas"></canvas>
</div>
CSS
.resizable{
width: 400px;
height: 400px;
}
#myCanvas{
width: 100%;
height: 100%;
}
Javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#777";
$(function() {
$(".resizable").resizable();
});
setInterval(function(){ ctx.fillRect(0, 0, 400, 400); }, 3);
Basically I have styled the canvas to fit inside of the "resizble" div, which is set to 400 by 400 at default. The canvas has a style which is 100% width and height so when the user resizes the "resizble" div the canvas will then just stretch out.
You will want to put the canvas into a JavaScript draw() function:
function draw() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
and your body element in css should have height and width set to 100%
Colleagues,
I have designed a dashboard with HTML canvas and want to show on same page a flot graph, toggling between them with a button.
The problem that I am facing is that when I click to get the flot, the graph shows up under the canvas, and not in the same place (as I want).
This is the relevant code :
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="800" height="400" style="background-color:#ffffff"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radio = canvas.height / 2;
var ent_direc={{ent_direc}};
var ent_vel={{ent_vel}};
ctx.translate(radio,radio);
radio_direc = radio * 0.9;
......
function show_graph is called when I click the button
function show_graph(){
// create dynamic DIV to hold graph
var div = document.createElement('div');
div.id = "placeholder";
document.body.appendChild(div) document.getElementById("placeholder").setAttribute("style","width:600px;height:300px");
ctx.save();
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
ctx.restore();
data_g =[ [0,2],[1,4],[2,5]];
$(document).ready(function(){
$.plot($("#placeholder"), [
{
data: data_g ,
bars:
{
show: true
}
}
]);
});
Any idea on how to show the flot graph on the same canvas area?
What you try is not that simple. Flot takes a div element and creates its own canvas elements in this div (and some stuff around the canvas like axis labels).
The easiest solution would be to hide your original canvas when you create the Flot graph:
$('#canvas').hide();
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a canvas box and I need to take a screenshot of it to save onto the same page under the canvas box. When you click on the small picture it should bring you to a bigger picture. I want it to take as many screen shots as I want and have them all show up on the page until I press clear.
I know that I could use the dataToUrl() for the saving part, but I don't know how the go about the rest of it.
//define some HTML to play with
<canvas id="mycanvas" width="400" height="200"></canvas>
<p><button type="button" id="savebutton">Save canvas</button></p>
<div id="gallery"></div>
<script>
//capture HTML elements
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var saveButton = document.getElementById('savebutton');
var gallery = document.getElementById('gallery');
//draw something in canvas to be captured
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, 400, 200);
ctx.fillStyle = 'red';
ctx.font = '50px Arial, sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Hello, world', 200, 100);
//define an event listener for the button
var addImage = function(e){
var img = document.createElement("img");
img.src = canvas.toDataURL();
gallery.appendChild(img);
if(e){
e.preventDefault();
e.returnValue=false;
}
};
//clicking the button will create an image element from the canvas data
//and append it as a child element to the gallery div
saveButton.addEventListener('click', addImage, false);
</script>
http://jsfiddle.net/KaliedaRik/77bNp/