I have an little problem to understand how i could implement an formula out of an existing KaTex Js file in an canvas element to get the same symbols as i get it with
<span id="mykatex1">...</span>
<script>
katex.render("f(a,b,c) = (a^2+b^2+c^2)^3", mykatex1);
</script>
.But i want the possition of the < span > in the
ctx.fillText( "-A", p_index_a, p_index_a );
sector, where
"-A"
is. ... And thats my problem. Maybe it exists an other way how to implement math functions in an canvas area, but atm i am a little bit confused and planless how i could handle that. By the way. Thats an full functional blank dynamic graph. Free for use. An solution wouldbe cool, because the plan is to implement also the same symbols in the graph area. thx
<!DOCTYPE html>
<html lang="de">
<head>
<title>Simple guide to using KaTeX</title>
<link rel="stylesheet" href="css/js_formeln__katex.min.css">
<script src="js/katex.min.js"></script>
<style type="text/css">
canvas {
border: 1px solid black;
font: 1.2em "Fira Sans", sans-serif;
}
</style>
</head>
<body>
<p><span id="mykatex1">...</span></p>
<script>
katex.render("f(a,b,c) = (a^2+b^2+c^2)^3", mykatex1);
</script>
<body onload="draw();">
<canvas id="canvas" width="2000" height="1000" ></canvas>
</body>
<script>
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var b_x = 300, b_y = 300;
var b_x_erweitern_um = 600;
var b_y_erweitern_um = 100;
var x = 0, y = 0;
var grid_breite_x_y = 10;
var linewidth_1 = 0.1 , linewidth_2 = 1;
var freier_oberer_rand = 10;
var nach_links_verkleinern = 0;
var nach_rechts_verkleinern = 500;
var d_in = 0.5;
for ( x ; x <= b_x - freier_oberer_rand - nach_links_verkleinern -
nach_rechts_verkleinern + b_x_erweitern_um ; x += grid_breite_x_y ) {
ctx.moveTo( d_in + x + freier_oberer_rand + nach_rechts_verkleinern , freier_oberer_rand );
ctx.lineWidth = linewidth_1;
ctx.lineTo( d_in + x + freier_oberer_rand + nach_rechts_verkleinern , b_x + b_y_erweitern_um);
}
// horizontale Linien
for ( y + freier_oberer_rand ; y <= b_y - freier_oberer_rand + b_y_erweitern_um ; y += grid_breite_x_y ) {
ctx.moveTo( freier_oberer_rand + nach_rechts_verkleinern , d_in + y + freier_oberer_rand);
ctx.lineWidth = linewidth_1;
ctx.lineTo( b_x - nach_links_verkleinern + b_x_erweitern_um , d_in + y + freier_oberer_rand );
}
ctx.strokeStyle = "black";
ctx.stroke();
// Pfeile für x
ctx.beginPath();
ctx.fillStyle = 'black';
ctx.moveTo( b_x - nach_links_verkleinern + b_x_erweitern_um + 10, b_y + b_y_erweitern_um );
ctx.lineTo( b_x - nach_links_verkleinern + b_x_erweitern_um + 5, b_y + b_y_erweitern_um - 2 );
ctx.lineTo( b_x - nach_links_verkleinern + b_x_erweitern_um + 5, b_y + b_y_erweitern_um + 2 );
ctx.lineTo( b_x - nach_links_verkleinern + b_x_erweitern_um + 10, b_y + b_y_erweitern_um );
ctx.fill();
// Pfeile für y
ctx.beginPath();
ctx.moveTo( freier_oberer_rand + nach_rechts_verkleinern , freier_oberer_rand - 10 );
ctx.lineTo( freier_oberer_rand + nach_rechts_verkleinern + 2 , freier_oberer_rand - 5 );
ctx.lineTo( freier_oberer_rand + nach_rechts_verkleinern - 2 , freier_oberer_rand - 5 );
ctx.lineTo( freier_oberer_rand + nach_rechts_verkleinern , freier_oberer_rand - 10 );
ctx.fill();
// Bezeichnung x und y
ctx.beginPath();
ctx.font = '10pt Calibri';
ctx.fillStyle = 'black';
ctx.fillText( "y", freier_oberer_rand + nach_rechts_verkleinern - 10, freier_oberer_rand + 2 );
ctx.fillText( "x", b_x - nach_links_verkleinern + b_x_erweitern_um , b_y + b_y_erweitern_um + 10 );
var h_font = 30;
var p_index_a = 30;
var p_index_b = 90;
var omega = "0x03A9";
var test = "\\frac{d}{dx}\\left[\\int_a^xf(t)dt\\right]=f(x)";
var test2 = encodeURIComponent("\\frac{d}{dx}\\left[\\int_a^xf(t)dt\\right]=f(x)");
ctx.beginPath();
ctx.font = '30px Helvetica, Arial, sans-serif';
ctx.fillStyle = 'lime';
ctx.fillText( "-A", p_index_a, p_index_a );
ctx.fillText( "Aufprallfläche der Teilchen", p_index_b, p_index_a );
ctx.fillStyle = 'red';
ctx.fillText( "-V", p_index_a, p_index_a*2 );
ctx.fillText( "Volumen bei d. Impulsion", p_index_b, p_index_a*2 );
}
else {
alert("Dein Browser unterstützt das <canvas> Element nicht");
}
}
draw();
</script>
