Add text over canvas chart javascript-CodePudding

I have a canvas (chart) that i would like to add text upon ( sum of calculations, or more data by text) is there a way to make the text apear in front of the canvas and not be hidden by it? (i tried to add text over the canvas, and it was hidden by it.. )

CodePudding user response：

you can use z-index in your css to front your text

CodePudding user response：

Yes, it's fairly simple to add text to the canvas. You just need a variable to reference the data that you want to display and then use the canvas api build the text as I've shown below.

elements added to the canvas are, by default, placed above the previously added elements, so as long as your text is created after your chart, it should appear above it.

// make the canvas element and add it to the DOM
let canvas = document.createElement("canvas");
canvas.width = 256;
canvas.height = 256;
canvas.style.border = "1px solid black";
canvas.style.backgroundColor = "white";
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");

//Create a text string defines the content you want to display
//This could be updated dynamically in your program
let content = "My Data";
//Assign the font to the canvas context.
//The first value is the font size, followed by the names of the
//font families that should be tried:
//1st choice, fall-back font, and system font fall-back
ctx.font = "14px 'Rockwell Extra Bold', 'Futura', sans-serif";
//Set the font color to red
ctx.fillStyle = "red";
//Figure out the width and height of the text
let width = ctx.measureText(content).width,
  height = ctx.measureText("M").width;
//Set the text's x/y registration point to its top left corner
ctx.textBaseline = "top";
//Use `fillText` to Draw the text in the center of the canvas
ctx.fillText(
  content, //The text string
  10, //The x position
  canvas.height / 2 - height / 2 //The y position
);