Direct interaction HTML canvas
-
Hello DWBooster,
Is it possible to use forms for input in HTML canvas? I know that this functionality is achievable through the Chart.js module, can it also be implemented using plain HTML canvas? I have included the code below in an HTML code, it functions correctly. However, when I replace the value 40 with fieldname1, it does not accept the input from the form. This interaction is possible with the Chart.js module. I would like to know if it is feasible to achieve this without relying on the Chart.js module.
<html>
<head>
<title>Circle Time</title>
<style>
canvas {
border: #333 1px solid;
}
body {
padding: 50px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
<script>
let canvas = document.querySelector("#myCanvas");
let context = canvas.getContext("2d");
function draw() {
// draw the colored region
context.beginPath();
context.arc(200, 200, 93, 0, 2 * Math.PI, true);
context.fillStyle = "#E2FFC6";
context.fill();
// draw the stroke
context.lineWidth = 40;
context.strokeStyle = "#66CC01";
context.stroke();
}
draw();
</script>
</body>
</html>
-
Hello CodePeople2,
Thanx for the prompt reaction. I was able to place the html in the form but cannot interact with it. For example fieldname3 is the linewidth of the circle but it does not change when changing it in the form (advanced code is on). testcanvas – Business@Motion
<html>
<head>
<title>Circle Time</title>
<style>
canvas {
border: #333 1px solid;
}
body {
padding: 50px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
<script>
let canvas = document.querySelector("#myCanvas");
let context = canvas.getContext("2d");
let rect = canvas.getBoundingClientRect();
canvas.width = rect.width * devicePixelRatio;
canvas.height = rect.height * devicePixelRatio;
context.scale(devicePixelRatio,devicePixelRatio)
canvas.style.width = rect.width + "px";
canvas.style.height = rect.height + "px";
function draw() {
// draw the colored region
context.beginPath();
context.arc(200, 200, 93, 0, 2 * Math.PI, true);
context.fillStyle = "#E2FFC6";
context.fill();
// draw the stroke
context.lineWidth = fieldname3;
context.strokeStyle = "#66CC01";
context.stroke();
}
draw();
</script>
</body>
</html>
The topic ‘Direct interaction HTML canvas’ is closed to new replies.
