I'm trying to make a very simple drawing app and I'm having real trouble with syntax...
I just want the user to be able to draw a line on a canvas.
// paint.js
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//resizing
//canvas.height = window.innerHeight;
//canvas.width = window.innerWidth;
//variables
var painting = false;
function startPosition(e) {
painting = true;
draw(e);
}
function endPosition() {
painting = false;
context.beginPath();
}
function draw(e) {
if (!painting) return;
context.lineWidth = 7;
context.lineCap = "round";
context.strokeStyle = "green";
context.lineTo(e.clientX, e.clientY);
context.stroke();
context.beginPath();
context.moveTo(e.clientX, e.clientY);
}
//EventListeners
canvas.addEventListener("mousedown", startPosition)
canvas.addEventListener("mouseup", endPosition);
canvas.addEventListener("mousemove", draw);
};
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>draw</title>
<link href="grove.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>draw</h1>
<div class="nav">
artists
draw and listen
store
</div>
<div>
<canvas id="canvas" height="480" width="640" style="border:1px solid #000000; background-color: white;">Please update your browser.</canvas>
<!-- <script src="paint.js"></script> -->
</div>
<a class="aHome" href="index.html"><img src="img/planet-green.png" style="float:right;width:42px;height:42px;" alt="home planet"></a>
<div>
<p style="clear: right;">© 2020</p>
</div>
</body>
</html>
There are the full HTML and js files for more context to try and solve the issue of the canvas not responding in a web page. It seems to work fine as a standalone function within stack overflow, leading me to believe the problem with with the other code...
Related
I am new one for canvas.I want to know how to draw a line with scrollable canvas window.my expectation is canvas window fit the screen and if line went to out side of the view port then the canvas window is scrollable until to view the end of the line.i try this code.any idea for this problem.Thank you.
<html>
<head>
<head>
<body>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;float: left;" > Your browser does not support the HTML5 canvas tag.</canvas>
<script>
function draw() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(1500,1000);
ctx.stroke();
}
draw();
</script>
</body>
</html>
You can have the browser add scrollbar(s) by wrapping a taller canvas inside a shorter div and setting the shorter div's overflow:scroll.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,1000);
ctx.stroke();
body{ background-color: ivory; }
#viewport{width:320px;height:150px;border:1px solid blue;overflow:scroll;}
#canvas{border:1px solid red; }
<div id=viewport>
<canvas id="canvas" width=300 height=1500></canvas>
</div>
i am making a basic game loop so i started with the basic cube exercise and i wrote the exemple below but it isn't working. i tried to see if there is something misspell but i could find nothing aparently.
<!DOCTYPE HTML>
<html>
<head>
<title>Game</title>
<style type="text/css">
#GameCanvas {
background-color: #FF0000;
}
</style>
</head>
<body>
<canvas id="GameCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.findElementById("GameCanvas");
var graphics = canvas.getContext("2d");
function Update() {}
function Draw() {
graphics.beginPath();
graphics.fillRect(20, 20, 50, 50);
graphics.fillStyle = "#FFFFFF";
graphics.fill();
graphics.closePath();
}
function GameLoop() {
Update();
Draw();
requestAnimFrame(GameLoop);
}
requestAnimFrame(GameLoop);
</script>
</body>
</html>
You have a couple bugs here, document.findElementById does not exist, change it to document.getElementById.
requestAnimFrame should be changed to requestAnimationFrame in both instances.
With these changes your loop runs and draws a square to the screen.
<!DOCTYPE HTML>
<html>
<head>
<title>Game</title>
<style type="text/css">
#GameCanvas {
background-color: #FF0000;
}
</style>
</head>
<body>
<canvas id="GameCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("GameCanvas");
var graphics = canvas.getContext("2d");
function Update() {}
function Draw() {
graphics.beginPath();
graphics.fillRect(20, 20, 50, 50);
graphics.fillStyle = "#FFFFFF";
graphics.fill();
graphics.closePath();
}
function GameLoop() {
Update();
Draw();
requestAnimationFrame(GameLoop);
}
requestAnimationFrame(GameLoop);
</script>
</body>
</html>
I have been working on a interactive floorplan, that when you press a button, it would draw on the Canvas element. The more I have been working with this, the more I've grown aware that it might not even be possible - any ideas? Here's how much of the code I have done ( it does not work as intended, obviously)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul id="nav">
<div id="buttons">
<input type="button" id="clear" value="118">
</div>
</ul>
<div id="main">
<canvas id="118" width="1200" height="630" style="border:1px solid #d3d3d3;"></canvas>
<script>
var canvas = document.getElementById("canvas118");
var context = canvas.getContext("2d");
document.getElementById('clear').addEventListener('click', function() {
context.moveTo(87,354);
context.lineTo(169,426);
context.lineTo(277,397);
context.lineTo(198,324);
context.lineTo(87,354);
context.fillstyle = "#ff0000";
context.fill();
context.strokeStyle = "#ff0000";
context.stroke();
});
</script>
</div>
</body>
</html>
Here's your code working / changed:
https://jsfiddle.net/dxhytwf4/2/
created a funcion and added the click event directly on the input:
<input type="button" id="clear" value="118" onclick="draw()" />
Javascript:
function draw() {
var canvas = document.getElementById("118");
var context = canvas.getContext("2d");
...
Also you were getting element canvas118 not 118
Seems to me like you are missing the call to beginPath()...Try it like this:
var c=document.getElementById("canvas118");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
Taken from here.
I'm a beginner and the code inside the script which is called context.textAlign = "centre"; isn't moving "Sample Text" to the centre of the canvas border which is made by css so am i doing something wrong or am i missing something etc. Thanks
<!doctype html>
<html>
<head>
<title>html5 canvas text</title>
<style>
#testCanvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1> canvas text </h1>
<canvas id="testCanvas" width="500" height="300">Your browser does not support the canvas element.</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
context.textAlign = "centre";
context.font = "Bold 60pt Arial";
context.fillStyle = 'rgba(0,0,255,0.5)';
context.fillText("Sample Text", x, y);
context.strokeStyle = "green";
context.lineWidth = 3;
context.strokeText("Sample Text", x, y);
}
</script>
</body>
</html>
Wrong Typo:
It is "center" and not "centre".
<!doctype html>
<html>
<head>
<title>html5 canvas text</title>
<style>
#testCanvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1> canvas text </h1>
<canvas id="testCanvas" width="500" height="300">Your browser does not support the canvas element.</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
context.textAlign = "center";
context.font = "Bold 60pt Arial";
context.fillStyle = 'rgba(0,0,255,0.5)';
context.fillText("Sample Text", x, y);
context.strokeStyle = "green";
context.lineWidth = 3;
context.strokeText("Sample Text", x, y);
}
</script>
</body>
</html>
Change your textAlign from centre to center
<!doctype html>
<html>
<head>
<title>html5 canvas text</title>
<style>
#testCanvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1> canvas text </h1>
<canvas id="testCanvas" width="500" height="300">Your browser does not support the canvas element.</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
context.textAlign = "center";
context.font = "Bold 60pt Arial";
context.fillStyle = 'rgba(0,0,255,0.5)';
context.fillText("Sample Text", x, y);
context.strokeStyle = "green";
context.lineWidth = 3;
context.strokeText("Sample Text", x, y);
}
</script>
</body>
</html>
Html5
<canvas id="myCanvas" width="578" height="200"></canvas>
JavaScript
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 50);
context.lineTo(50, 150);
context.lineTo(150, 150);
context.lineTo(100, 50);
context.stroke();
Here's how to hit test your triangle:
You can define your path (as you've defined your triangle)
Listen for mousemove events and determine the mouse position
Use context.isPointInPath(mouseX,mouseY) to test if your mouse is inside the defined triangle.
Example code and a Demo: http://jsfiddle.net/m1erickson/XL93U/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
context.beginPath();
context.moveTo(100, 50);
context.lineTo(50, 150);
context.lineTo(150, 150);
context.lineTo(100, 50);
context.stroke();
function handleMouseMove(e){
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
var inside=context.isPointInPath(mouseX,mouseY);
var text=(inside)?"Inside":"Outside";
$("#results").text(text);
}
$("#canvas").mousemove(function(e){handleMouseMove(e);});
}); // end $(function(){});
</script>
</head>
<body>
<h4 id="results">Move mouse in and out of triangle</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>