In below example, lets say json.mes is the received message from Ajax; A button is designed which must display the message in a canvas box. I have tried to read the message using getElementById (as below); however, it does not work. Any solution?
<div> <button id="submit" type="button" class="btn btn-success" style="float: right;">Populate</button></div>
<script>
var canvas = document.getElementById("myCanvas3");
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = "#dbbd7a";
ctx.font = "10px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillStyle = "#ff0000";
ctx.fillText(document.getElementById("picoutput0"), 74, 74);
</script>
<script>
...
$("#submit").click(function(e) {
...
var text0=json.mes
$('#picoutput0').html(text0);
</script>
try this code
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle = '#0e70d1';
ctx.fillRect(0, 0, canvas.width, canvas.height);
var stringTitle = document.getElementById('title').textContent;
console.log(stringTitle);
ctx.fillStyle = '#fff';
ctx.font = '60px sans-serif';
ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);
DEMO
Related
Can't diminish canvas arc's value with input (it accepts larger than default values but not the smaller ones), what to do?
var button = document.querySelector(".btn");
button.addEventListener("click", () => {
var input = document.querySelector(".inp").value;
var c = document.querySelector(".canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, `${input}`);
ctx.stroke();
})
The canvas should be cleared before you draw the next arc, if not they will overlap.
Just add ctx.clearRect(0,0, c.width, c.height); before the arc.
See sample below
var button = document.querySelector(".btn");
var c = document.querySelector(".canvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 10;
ctx.lineCap = "round";
button.addEventListener("click", () => {
var input = document.querySelector(".inp").value;
ctx.beginPath();
ctx.clearRect(0,0, c.width, c.height);
ctx.arc(100, 75, 50, 0, `${input}`);
ctx.stroke();
})
<button class="btn">click me</button>
<input class="inp" value=3.14><br>
<canvas class="canvas"></canvas>
I'm trying to clear only the strokeRect() and keep content in that rectangle.
In this example, how do I clear green rectangle without affecting the red one?
var cut = [50, 70, 100, 100]
var cut1 = [60, 85, 60, 60]
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(cut[0], cut[1], cut[2], cut[3]);
ctx.lineWidth = 3;
ctx.strokeStyle = 'green';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.rect(cut1[0], cut1[1], cut1[2], cut1[3]);
ctx.lineWidth = 3;
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.closePath();
<canvas id="canvas" width=400px height=200px></canvas>
Can't figure out how..
Thanks in advance!
You need to clear the canvas and draw the red rectangle again.
var c = document.getElementById("canvas");
c.width=400;
c.height=200;
var ctx = c.getContext("2d");
var cut = [50, 70, 100, 100]
var cut1 = [60, 85, 60, 60]
function drawRectangle(cut,fill){
ctx.beginPath();
ctx.rect(cut[0], cut[1], cut[2], cut[3]);
ctx.lineWidth = 3;
ctx.strokeStyle = fill;
ctx.stroke();
ctx.closePath();
}
drawRectangle(cut,"green");
drawRectangle(cut1,"red");
clear.addEventListener("click",()=>{
ctx.clearRect(0,0, c.width, c.height);
drawRectangle(cut1,"red");
});
canvas{display:block;}
<button id="clear">clear</button>
<canvas id="canvas" width=400px height=200px></canvas>
In your case, clear & redraw is what you really need, but just for completeness, to clear in any shape, you can use compositing operations.
By setting the compositing mode to destination-out, all the pixels that should normally have been filled by your drawings will actually get rendered as transparent.
So to make a simple clear-stroke-rect:
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 80, 80);
// clear
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = 5;
ctx.strokeRect(40,40,30,30);
// set back to 'normal'
ctx.globalCompositeOperation = 'source-over';
<canvas id="canvas"></canvas>
But using compositing, you can really clear in any shape, even from bitmap with transparency:
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 80, 80);
// clear
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage(img, 40,40);
// set back to 'normal'
ctx.globalCompositeOperation = 'source-over';
};
img.src = 'https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png';
<canvas id="canvas"></canvas>
I need one help. I need to increase the font size using canvas and Javascript. I am explaining my code below.
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
ctx.font = "40px Calibri";
var y=10;
var cnt=0;
var bg;
var logo;
var bgLoaded = false;
var logoLoaded = false;
var dataURL='';
var str='Valid:'+$('#validfrm').val()+'-'+$('#validto').val();
canvas.width = bg.width;
canvas.height = bg.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(bg, 0, 0);
ctx.drawImage(logo, 20, 130);
ctx.fillStyle = 'black';
ctx.fillText($('#copTitle').val(), 160, 70);
ctx.fillText($('#coupondiscount').val(), 190, 110);
ctx.fillText($('#couponmessage').val(), 190, 150);
ctx.fillText(str, 60, 280);
Here I have set the high font size but the small text size is coming. Please help me to resolve this issue.
I am trying to create an HTML5 canvas which displays text and onmouseover will remove that text and display a different bit of text.
This works fine for changing the colour - essentially just creating a new canvas over the current one.
However, onmouseover the new text displays but the previous text remains.
http://jsfiddle.net/3j2b2egb/
HTML:
<body onload="changeBack()">
<canvas id="test"
width="330"
height="200"
style="border:1px solid #787878;"
onmouseover="change()"
onmouseout="changeBack()">
</canvas>
Javascript:
function changeBack() {
var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.font = "bold 16px Arial";
ctx.fillText("hello", 100, 100);
}
function change() {
var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.font = "bold 16px Arial";
ctx.fillText("world", 100, 100);
}
Try this. I have cleared canvas before drawing it.
function changeBack() {
var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.clearRect ( 0 , 0 , c.width, c.height );
ctx.fillStyle = "blue";
ctx.font = "bold 16px Arial";
ctx.fillText("hello", 100, 100);
}
function change() {
var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.clearRect ( 0 , 0 , c.width, c.height );
ctx.fillStyle = "red";
ctx.font = "bold 16px Arial";
ctx.fillText("world", 100, 100);
}
Here is working demo http://jsfiddle.net/3j2b2egb/1/
I used tips + code from this post to try to clone my original canvas - it contains an image with text overlaid on it. However, every time I run it, neither the image nor the text get copied, though the original works fine. Here is the javascript:
<script>
function CardText() {
var title = document.calform.titleText.value;
var badge = document.calform.badge.value;
var encourage = document.calform.encourage.value;
var description = document.calform.description.value;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
context.font = "25pt Helvetica";
context.fillStyle = "white";
context.textAlign = "center";
context.fillText(title, x, 76);
context.font = "18pt Arial";
context.fillStyle = "white";
context.textAlign = "center";
context.fillText(badge, x-10, 311);
context.font = "18pt Arial";
context.fillStyle = "black";
context.textAlign = "center";
context.fillText(encourage, x, 380);
context.font = "12pt Arial";
context.fillStyle = "black";
wrapText(context, description, x, 440, 280, 18);
};
imageObj.src = 'https://i.imgur.com/7wqLgSd.jpg';
}
function cloneCanvas(oldCanvas) {
//create a new canvas
var newCanvas = document.createElement('canvas');
var context = newCanvas.getContext('2d');
//set dimensions
newCanvas.width = oldCanvas.width;
newCanvas.height = oldCanvas.height;
//apply the old canvas to the new one
context.drawImage(oldCanvas, 100, 300);
//return the new canvas
return newCanvas;
}
</script>
And I run it with an html button:
<input class="btn btn-lg btn-primary" align = 'center' type=button name=button1 value="COPY" onClick="cloneCanvas(canvas)">
Any help would be much appreciated!
Edit: markE was kind enough to fix my problem, however it's not coming up within the full HTML document. Here's the full HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:ivory;
padding:10px;
}
#fills {
position: relative;
margin-left: 100px;
}
canvas{
border:1px solid red;
}
</style>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
// create the original card canvas
// after the image has loaded
CardText();
// next clone the original card canvas
// to a new canvas
var myNewCanvas=cloneCanvas(canvas);
document.body.appendChild(myNewCanvas);
};
imageObj.src = 'https://i.imgur.com/7wqLgSd.jpg';
function CardText() {
var title ="Title";// document.calform.titleText.value;
var badge ="Badge";// document.calform.badge.value;
var encourage ="Encourage";// document.calform.encourage.value;
var description ="Description";// document.calform.description.value;
var x = canvas.width / 2;
var y = canvas.height / 2;
context.drawImage(imageObj, 0, 0);
context.font = "25pt Helvetica";
context.fillStyle = "white";
context.textAlign = "center";
context.fillText(title, x, 76);
context.font = "18pt Arial";
context.fillStyle = "white";
context.textAlign = "center";
context.fillText(badge, x-10, 311);
context.font = "18pt Arial";
context.fillStyle = "black";
context.textAlign = "center";
context.fillText(encourage, x, 380);
context.font = "12pt Arial";
context.fillStyle = "black";
context.fillText(description, x, 440);
// wrapText(context, description, x, 440, 280, 18);
}
function cloneCanvas(oldCanvas) {
//create a new canvas
var newCanvas = document.createElement('canvas');
var context = newCanvas.getContext('2d');
//set dimensions
newCanvas.width = oldCanvas.width;
newCanvas.height = oldCanvas.height;
//apply the old canvas to the new one
context.drawImage(oldCanvas, 100, 300);
//return the new canvas
return newCanvas;
}
</script>
<div id="fills" >
<td align=right width=200>Title:</td>
<td><input type=text name=titleText size=10 maxlength=10></td>
<td align=right width=200>Badge Name:</td>
<td><input type=text name=badge size=10 maxlength=10></td>
<td align=right width=200>Encouraging Words:</td>
<td><input type=text name=encourage size=10 maxlength=14></td>
<td align=right width=200>Description:</td>
<td><input type=text name=description size=50 maxlength=120></td>
<input class="btn btn-lg btn-primary" align = 'center' type=button name=button1 value="Submit" onClick="CardText()">
</div>
<canvas id="myCanvas" width="390" height="540"></canvas>
</body>
</html>
It looks like you might be calling cloneCanvas before CardText has a chance to fully load the image and draw the text on the image.
Try this refactoring which fully loads the image+text before trying to cloneCanvas.
Example Code and a Demo:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
// create the original card canvas
// after the image has loaded
CardText();
// next clone the original card canvas
// to a new canvas
var myNewCanvas=cloneCanvas(canvas);
document.body.appendChild(myNewCanvas);
};
imageObj.src = 'https://i.imgur.com/7wqLgSd.jpg';
function CardText() {
var title ="Title";// document.calform.titleText.value;
var badge ="Badge";// document.calform.badge.value;
var encourage ="Encourage";// document.calform.encourage.value;
var description ="Description";// document.calform.description.value;
var x = canvas.width / 2;
var y = canvas.height / 2;
context.drawImage(imageObj, 0, 0);
context.font = "25pt Helvetica";
context.fillStyle = "white";
context.textAlign = "center";
context.fillText(title, x, 76);
context.font = "18pt Arial";
context.fillStyle = "white";
context.textAlign = "center";
context.fillText(badge, x-10, 311);
context.font = "18pt Arial";
context.fillStyle = "black";
context.textAlign = "center";
context.fillText(encourage, x, 380);
context.font = "12pt Arial";
context.fillStyle = "black";
context.fillText(description, x, 440);
// wrapText(context, description, x, 440, 280, 18);
}
function cloneCanvas(oldCanvas) {
//create a new canvas
var newCanvas = document.createElement('canvas');
var context = newCanvas.getContext('2d');
//set dimensions
newCanvas.width = oldCanvas.width;
newCanvas.height = oldCanvas.height;
//apply the old canvas to the new one
context.drawImage(oldCanvas, 100, 300);
//return the new canvas
return newCanvas;
}
body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}
<canvas id="myCanvas" width=390 height=540></canvas>
[ Addition: plugged my answer above into Allen Rabinovich's code. ]
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
// create the original card canvas
// after the image has loaded
CardText();
};
imageObj.src = 'https://i.imgur.com/7wqLgSd.jpg';
document.getElementById('drawAll').onclick=function(){
CardText();
// next clone the original card canvas
// to a new canvas
var myNewCanvas=cloneCanvas(canvas);
document.body.appendChild(myNewCanvas);
}
function CardText() {
var title=document.getElementsByName('titleText')[0].value;
var badge=document.getElementsByName('badge')[0].value;
var encourage=document.getElementsByName('encourage')[0].value;
var description=document.getElementsByName('description')[0].value;
var x = canvas.width / 2;
var y = canvas.height / 2;
context.drawImage(imageObj, 0, 0);
context.font = "25pt Helvetica";
context.fillStyle = "white";
context.textAlign = "center";
context.fillText(title, x, 76);
context.font = "18pt Arial";
context.fillStyle = "white";
context.textAlign = "center";
context.fillText(badge, x-10, 311);
context.font = "18pt Arial";
context.fillStyle = "black";
context.textAlign = "center";
context.fillText(encourage, x, 380);
context.font = "12pt Arial";
context.fillStyle = "black";
context.fillText(description, x, 440);
// wrapText(context, description, x, 440, 280, 18);
}
function cloneCanvas(oldCanvas) {
//create a new canvas
var newCanvas = document.createElement('canvas');
var context = newCanvas.getContext('2d');
//set dimensions
newCanvas.width = oldCanvas.width;
newCanvas.height = oldCanvas.height;
//apply the old canvas to the new one
context.drawImage(oldCanvas,0,0);
//return the new canvas
return newCanvas;
}
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
#fills{ position: relative; margin-left: 100px; }
Title:<input type=text name=titleText size=10 maxlength=10><br>
Badge:<input type=text name=badge size=10 maxlength=10><br>
Encourage:<input type=text name=encourage size=10 maxlength=14><br>
Description:<input type=text name=description size=50 maxlength=120><br>
<input id=drawAll class="btn btn-lg btn-primary" align = 'center' type=button name=button1 value="Submit">
<canvas id="myCanvas" width="390" height="540"></canvas>