Retrieving ID of element on canvas - javascript

I originally wrote a script in js that I am now rewriting using HTML5 on a canvas. Previously I had
<p id = "collision">Test</p>
function checkHit(){
if (my conditions) {
document.getElementById("collision").innerHTML = "hit!";
}
}
This worked fine, but now in my canvas I have
c.fillStyle = "#ffff00";
c.font = "30px Arial";
c.fillText("Test", 10, 50);
How can I get the ID of "test" so that I can change it to "hit!" on the canvas.

What you should do is clear the canvas, then refill it with text:
c.clearRect(0, 0, canvas.height, canvas.width);
c.fillStyle = "#ffff00";
c.font = "30px Arial";
c.fillText("Hit!", 10, 50);

Related

How to specify background and text colors in HTML Canvas?

How I can specify a color for the background and text?
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext("2d");
ctx.font = "30px Impact";
ctx.fillText("Awesome!", 50, 100);
I just need to change fillStyle - it sets a color, then draw a background in color, then change color, then draw text:
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillRect(0, 0, 200, 200);
ctx.font = "30px Impact";
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fillText("Awesome!", 50, 100);

HTML Canvas remove letter spacing on the beginning of a word

I have a canvas and I want to print words on it in horizontal and vertical orientation. The printing itself works fine but I have a somewhat annoying spacing at the beginning of the words, which becomes extremely visible on the vertical text like the EX on the example image.
I just created a little example which shows what I mean
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle = "red";
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();
ctx.font = "50px Arial";
// Show the different textAlign values
ctx.textAlign = "start";
ctx.fillText("EX", 150, 50);
ctx.textAlign = "end";
ctx.fillText("EX", 150, 100);
ctx.textAlign = "center";
ctx.fillText("EX", 150, 150);
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
Is there a way to place the beginning of the word at the point I am drawing to or is there a way to calculate the spacing at the beginning and then just subtract it from the starting point of the text?
The TextMetrics interface has actualBoundingBox[...] information that you can use to know by how much the actual bounding box is offset relatively to the textAlign and textBaseline lines.
So adding the measured actualBoundingBoxLeft to your horizontal position when writing LTR text with the "start" text-align will remove this gap.
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
const input = document.querySelector("input");
input.oninput = draw;
draw();
function draw() {
const txt = input.value;
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillStyle = "black";
// Create a red line in position 150
ctx.strokeStyle = "red";
ctx.moveTo(150, 20);
ctx.lineTo(150, 180);
ctx.stroke();
ctx.font = "50px Arial";
ctx.textBaseline = "top"; // needed for the ascent and decsent measurements
// Show the original textAlign
ctx.textAlign = "start";
ctx.fillText(txt, 150, 30);
// fixed
ctx.fillStyle = "green";
const metrics = ctx.measureText(txt);
ctx.fillText(txt, 150 + metrics.actualBoundingBoxLeft, 110);
// Draw the box around our text
ctx.translate( 150, 110 );
const x = 0; // we already did offset by actualBoundingBoxLeft
const y = metrics.actualBoundingBoxAscent * -1;
const width = metrics.actualBoundingBoxRight + metrics.actualBoundingBoxLeft;
const height = metrics.actualBoundingBoxDescent + metrics.actualBoundingBoxAscent;
ctx.strokeRect(x, y, width, height);
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
<input value="Éxy"><br>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;"></canvas>

color and overlap issues with canvas

Here is my html
<canvas class="row" id="myCanvas" width="500" height="50" style="border:1px solid #c3c3c3;" ></canvas>
and this is javascript
function showProgress() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillText("welcome", c.width/2, c.height/2);
ctx.textAlign = "center";
ctx.font = "30px Arial";
ctx.fillStyle = "#00ff00";
ctx.fillRect(0, 0, 270, 75);
}
showProgress();
I have following two issues.
1. Green fill rectangle is hiding the text. How can I show that text on top of fill color.
2. I would like text (welcome in this case) color to be red. Is there anyway of modifying just the text color.
code could be found at jsfiddle
https://jsfiddle.net/Lp24q01s/
function showProgress() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillStyle = "#00ff00";
ctx.fillRect(0, 0, 270, 75);
ctx.fillStyle = '#ff0000';
ctx.textAlign = "center";
ctx.font = "30px Arial";
ctx.fillText("welcome", c.width/2, c.height/2);
}
showProgress();
The canvas context uses the entire state to draw things and they're drawn in the order you call them. Want the text on top of a rectangle? Draw the rectangle first. Want to change the color? Set color to green, draw rectangle, set color to red, draw text.
It doesn't have a native way to say "the rectangle is green." It's more "the next thing you draw will have a fill style of green, I think I'll draw a rectangle" so you have a green rectangle.
function showProgress() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillStyle = "#00ff00";
ctx.fillRect(0, 0, 270, 75);
ctx.fillStyle = "#ff0000";// red text
ctx.fillText("welcome", c.width/2, c.height/2);
ctx.textAlign = "center";
ctx.font = "30px Arial";
}
showProgress();
you should put the fillText after the fillRect, also you need to set the fillStyle
because canvas is just a Finite State Machine, it can't remember what you was done.
if you make some difference state(such as change the fillStyle), and do another render(such as fillRect), the current result will always cover the result you done before.

HTML Canvas - change text dynamically

I am trying to change the text on my html canvas while I type inside an input text field.
I can add the text however, if I delete and type again the new text is added on the top of the old one.
JSFIDDLE
document.getElementById('title').addEventListener('keyup', function() {
var stringTitle = document.getElementById('title').value;
console.log(stringTitle);
ctx.fillStyle = '#fff';
ctx.font = '60px sans-serif';
var text_title = stringTitle;
ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);
});
This works. You just clear the canvas every time it's updated.
document.getElementById('title').addEventListener('keyup', function() {
var stringTitle = document.getElementById('title').value;
console.log(stringTitle);
ctx.fillStyle = '#0e70d1';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.font = '60px sans-serif';
var text_title = stringTitle;
ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);
});
UPDATE
In case you only want to update the area where the text is, you can do just that,
ctx.fillRect(0, 130, canvas.width, 70);
Another approach would be, keeping track of the text as well as other objects in the canvas and refreshing the entire canvas. This is not as memory intensive as you'd think. If you want, you could also reset the canvas only when the text has been deleted (completely or partially), by comparing the previous string with new one.
You can save the state of the canvas, update the content, then restore it via:
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle = '#0e70d1';
ctx.fillRect(0, 0, canvas.width, canvas.height);
document.getElementById('title').addEventListener('keyup', function () {
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(0, 0, canvas.width, canvas.height);
var stringTitle = document.getElementById('title').value;
ctx.fillStyle = '#fff';
ctx.font = '60px sans-serif';
var text_title = stringTitle;
ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);
ctx.restore();
});
<canvas width="500" height="300" id="canvas">Sorry, no canvas available</canvas>
<input type="text" id="title" placeholder="Your Title" />
</br>
try replace last few line with this
ctx.fillStyle = '#0e70d1';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);
by canvas limitation, you must redraw whole canvas in order to update its content
I would add your text to an array and then clear the canvas after every time you type and redraw all the text.
As the letter are different widths and so are spaces and backspaces you can't be certain you will exactly clear the letter you want to delete.

Canvas HTML5, IE vs Chrome vs FireFox - font and offset properties

I developed an HTML5 canvas graph that retrieves SQL-stored information and plots them graphically (color-coded) on a HTML5 canvas. The canvas allows scrolling over a timeline to show various events that have occured (Say between 1990 - 2013).
IE works like a charm.
Chrome has issues with the context font being muddy/bleeding effect - i was using monospace 11px, I changed it to verdana later on, but still a bit muddy with chrome. Firefox doesn't have this issue.
Firefox has an issue, where it retrives and plots information on the canvas, but when i click on the canvas to scroll in the past or future of current position on the timeline, the entire canvas dissapears. Chrome doesn't have this issue.
I 've tried to explain my issues on this question, if you need more clarification please ask.
here is the sample code:-
http://jsfiddle.net/WNpKE/16/
(if you click on the link and open it in IE, FireFox, and Chrome, I hope that the issue will become more evident.)
// defining the canvas element
var can = document.getElementById("myCanvas"),
ctx = can.getContext("2d"),
dragging = false,
translated = 0,
lastX = 0,
grid = (function (dX, dY) {
var can = document.createElement("canvas"),
ctx = can.getContext('2d');
can.width = dX;
can.height = dY;
// fill canvas color
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, dX, dY);
// x axis
ctx.strokeStyle = 'orange';
ctx.moveTo(.5, 0.5);
ctx.lineTo(dX + .5, 0.5);
ctx.stroke();
// y axis
ctx.moveTo(.5, .5);
ctx.lineTo(.5, dY + .5);
ctx.stroke();
return ctx.createPattern(can, 'repeat');
})(72, 50);
ctx.save();
/*ctx.scale(1, -1);
ctx.translate(0, -900);*/
// when mouse is clicked on canvas
can.onmousedown = function (e) {
var evt = e || event;
dragging = true;
lastX = evt.offsetX;
}
// when mouse is clicked again and the canvas is deselected
window.onmouseup = function () {
dragging = false;
}
window.onmousemove = function (e) {
var evt = e || event;
if (dragging) {
var delta = evt.offsetX - lastX;
translated += delta;
//console.log(translated);
ctx.restore();
ctx.clearRect(0, 0, 930, 900);
ctx.save();
ctx.translate(translated, 0);
lastX = evt.offsetX;
timeline();
}
}
// Function that draws the timeline on the xy grid along with data points.
function timeline() {
// fill canvas color
ctx.fillStyle = "black";
ctx.fillRect(-translated, 0, 930, 900);
ctx.fillStyle = grid;
ctx.fillRect(-translated, -250, 930, 900);
// y-co-ordinate texts - Home, Office, Emergency, etc...
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Home", -translated, 510);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Office", -translated, 460);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Emergency", -translated, 410);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Foster Home", -translated, 360);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("SNF", -translated, 310);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("LTC", -translated, 260);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Drug/Rehab", -translated, 210);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Hospital", -translated, 160);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Hospice", -translated, 110);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("ANP Exams", -translated, 540);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Life Event", -translated, 560);
ctx.strokeStyle = "White";
ctx.font = "10px Verdana";
ctx.strokeText("Care Plan", -translated, 610);
I have changed a bit since this code, but the basic idea of click and scroll is still the same. Thanks.
Use fillText instead of strokeText.
The FF error is happening because the FF event object doesn't have an offsetX property. Use pageX instead.
Updated fiddle: http://jsfiddle.net/WNpKE/18/
Take a look at the highcharts API. It's free and has an enormous amount of features. I've recently used it in a web application effort querying data from an SQL database not unlike what you're doing. It works across all the major browsers.
I am guessing that the canvas element (being a new feature of html5) isn't being rendered the same way between browsers. You may be better off either re-writing in javascript / java or just using the highcharts framework as-is. I realise this isn't a solution to your current problem, but it may save you some time.
Good Luck!

Categories