Javascript Canvas and fonts - javascript

When working on a canvas with javascript, is it possible to use ctx.fillText to return an input value?
something like this I guess:
(html)
(Customize:(input id="custom" value="Default Message" /)
(p)(button onclick="msg()")Try it(/button)(/p)
(canvas id="myCanvas" width="500" height="500")
(/canvas)
(/html)
(script)
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var message
message = document.getElementById("custom").value;
function msg(){
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.font = "italic 800 30px Verdana";
ctx.fillText(message, 485, 245, 1000);
}
msg();
(/script)
So whatever the user types into the input will be drawn on the canvas when "Try It" is clicked. Is this possible or am I way off track?

Did you try your code? It's essentially fine, except that you need to determine the value of message within the msg() function so that it can change when the user changes it and, you should either pick a new color, or add color to the canvas so you can SEE it:
<body>
Customize:<input id="custom" value="Default Message" />
<p><button onclick="msg()">Try it</button></p>
<canvas style="background-color:#cccccc" id="myCanvas" width="500" height="500">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var message;
function msg(){
message=document.getElementById('custom').value;
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.font = "italic 800 30px Verdana";
ctx.fillText(message, 100, 245, 1000);
}
msg();
</script>
</body>

Related

Is there any way to get all data from image?

I tried canvas but can't find if there is any way to get all data, there is only single pixel information.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #3f3939;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);
function copy() {
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 20, 20);
}
</script>
<button onclick="copy()">Copy</button>
</body>
</html>
I'm working on image Decryption/Encryption methods, but first I want to get all image data at once, please anyone help.
Extending on my comment...
I'm not sure what you mean by "get all image data at once" the getImageData can return as much or little as you need, and it certainly is at once, we don't need to make multiple calls, we just change the parameters.
read more:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData
If you need the entire canvas you can do:
ctx.getImageData(0, 0, c.width, c.height)
var output = document.getElementById("output");
var ctx_output = output.getContext("2d");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 80, 80);
ctx.fillRect(99, 20, 20, 20);
function copy() {
var imgData = ctx.getImageData(0, 0, c.width, c.height);
ctx_output.putImageData(imgData, 0, 0);
}
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #3f3939;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br>
<button onclick="copy()">Copy</button>
<br>
<canvas id="output" width="200" height="100" style="border:1px solid #0000ff;">
Your browser does not support the HTML5 canvas tag.</canvas>

can't load the image on canvas (Javascript)

I'm trying to load the image on canvas but it's not working:(
I checked functions and variables much time but I couldn't find any errors.
Help me to find the reasons why it can't be loaded.
When I run it on the tomcat server, only the canvas with aliceblue color is shown.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Print image and text</title>
<script>
function drawPicture(ctx) {
var img = new Image();
img.addEventListener('load', function() {
ctx.drawImage(img, 20, 20, 100, 100);
ctx.font = "50px forte";
ctx.strokeStyle="blue";
ctx.fillStyle = "violet";
ctx.strokeText("Spongebob", 20, 100);
ctx.fillText("Spongebob", 20, 100);
}, false);
img.src = "spongebob.png";
}
</script>
</head>
<body>
<h3>Print image and text</h3>
<hr>
<canvas id="myCanvas" width="300" height="130"
style="background-color:aliceblue"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
drawPicture(context);
</script>
</body>
</html>
Your code is fine, here is an example with a different image...
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="130"></canvas>
<script>
function drawPicture(ctx) {
var img = new Image();
img.addEventListener('load', function() {
ctx.drawImage(img, 20, 20, 100, 100);
ctx.font = "50px forte";
ctx.strokeStyle = "blue";
ctx.fillStyle = "violet";
ctx.strokeText("Spongebob", 20, 100);
ctx.fillText("Spongebob", 20, 100);
}, false);
img.src = "http://i.stack.imgur.com/UFBxY.png";
}
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
drawPicture(context);
</script>
</body>
</html>
Only thing could be that the image you are trying to load does not exist...
As #Kaiido mentioned in the comments you need to debug this, check in your browser developer tools see if the image is loading correctly.
You should see something like:
instead of image.addEventListener, try doing image.onload?
You can instead of using the load event in the image, try adding the image directly on the canvas.
function drawPicture(ctx) {
var img = new Image();
img.src = "spongebob.png";
ctx.drawImage(img, 20, 20, 100, 100);
ctx.font = "50px forte";
ctx.strokeStyle="blue";
ctx.fillStyle = "violet";
ctx.strokeText("Spongebob", 20, 100);
ctx.fillText("Spongebob", 20, 100);
}
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
drawPicture(context);
<h3>Print image and text</h3>
<hr>
<canvas id="myCanvas" width="300" height="130"
style="background-color:aliceblue"></canvas>

Pass Values To FillRect

I'm using the canvas fillrect function to draw a number of rectangles. I'm hardcoding the coordinates at the moment, but is it possible to pass these to fill rect like a function call to the function? For example if I have 10 sets of coordinates, can I do that using a for loop or something and passing it to fillRect?
<body>
<canvas id="canvas1" width="1224" height="770" position="absolute" style="border:1px solid #d3d3d3;">
<script>
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(330,0,150,75);
ctx.fillStyle = "#FF4500";
ctx.fillRect(30,80,150,75);
</script>
Yeah it is easy something like this:
<body>
<canvas id="canvas1" width="1224" height="770" position="absolute" style="border:1px solid #d3d3d3;">
<script>
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
function Generate(color,x,y,w,h)
{
ctx.fillStyle = color;
ctx.fillRect(x,y,w,h)
};
for(i=0;i<10;i++){
var height=100*i;
var width=50*i;
var x=i+(i*100);
var y=i+(i*120);
Generate("red",x,y,width,height);
}
</script>
</canvas>
</body>

Update canvas text after page load

I have a canvas elements in my webpage that is containing some text which I want to edit with text box.For example a text in canvas is "This is a apple" but later I want to change that text like this "Apple is never liked by me" This thing should be done via text box key up event with javascript or jQuery. Please give me some suggestions.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" 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.font = "20px Georgia";
ctx.fillText("This is a apple", 10, 50);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90);
</script>
<input id="sourceText1" type=text>
</body>
</html>
I want to change the text with textbox.
Here's some code that will work with your current example. It is however, terribly flawed - I'd like to make that very clear.
0) I've had to add 4 pixels in order to get the erasing rect to cover the text properly. I'm not sure why this is needed, or how to query/calculate this - I used an image editor. If the size of your text was different, I'd imagine you would need to use a different 'magic-number' than 4.
1) The example will break-down if the background is not white, most particularly if you have a pattern, rather than a solid colour.
2) The whole text is erased and redrawn for each keystroke - we should ideally speaking, only be clearing it if necessary. I.e - if the text gets longer and the new text is the same up until the new character, there's nothing to erase.
3) I'm too tired to further examine my code for flaws.
4) You can almost certainly (actually I'm about 99.9999999% sure) find code that does this kind of task already - code which is far more robust and, is production-ready.
Consider this code nothing more than "a hack that works". If I could post it merely as a comment, I would.
Perhaps a better option would be to simply draw the text again, using white as the colour - though I've a feeling that this wont quite work, due to anti-aliasing, which will leave a faint outline - failing to properly cover the existing text.
If the code is unsuitable for you, simply bring it back along with your receipt for a full refund. :laughs:
That said, here you go:
<!DOCTYPE html>
<html>
<head>
<script>
function byId(id){return document.getElementById(id);}
window.addEventListener('load', onDocLoaded, false);
var textPosX = 10, textPosY = 50;
var defaultText = "This is a apple";
var curText = defaultText;
var defaultFont = "20px Georgia";
function onDocLoaded(evt)
{
// add event listener to the input element, this will fire any time (text) input is received
byId('sourceText1').addEventListener('input', onSourceTextInput, false);
var c = byId("myCanvas");
var ctx = c.getContext("2d");
ctx.font = defaultFont;
ctx.fillText(defaultText, textPosX, textPosY);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90);
}
function onSourceTextInput(evt)
{
var can = byId('myCanvas');
var ctx = can.getContext('2d');
var curTextWidth, curTextHeight;
curTextWidth = ctx.measureText(curText).width;
curTextHeight = 20;
var curStyle = ctx.fillStyle;
ctx.fillStyle = "white";
ctx.fillRect(textPosX, (textPosY-curTextHeight)+4, curTextWidth, curTextHeight);
ctx.fillStyle = 'BLACK';
ctx.font = defaultFont;
ctx.fillText( this.value, textPosX, textPosY );
ctx.fillStyle = curStyle;
curText = this.value;
}
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<input id="sourceText1" type='text'/>
</body>
</html>

Drawing a opacity radial gradient on a HTML canvas and use it as a background

I'm looking for a way to make a canvas object look like this: http://www.onetuts.com/attachments/2010/05/07/1_201005072156152XYem.jpg
The gradient should be going from rgba(0,0,0,0.8) to rgba(0,0,0,0.2) but i don't get the canvas to be 1280x720px.
Gradient in your example image is different - from 0x828282 to 0x0a0a0a. Check this out:
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var grd = cxt.createRadialGradient(150, 150, 0, 150, 150, 150);
grd.addColorStop(0, "#828282");
grd.addColorStop(1, "#0a0a0a");
cxt.fillStyle = grd;
cxt.fillRect(0, 0, 300, 300);
<canvas id="myCanvas" width="300" height="300"></canvas>

Categories

Resources