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.
Related
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...
<!DOCTYPE html>
<html>
<head>
<title>Snake!!</title>
<link rel="stylesheet" href ="snake.css">
</head>
<body scroll="no" style="overflow: hidden">
<div class="canvas-container">
<img src="Apple.png" width="0" height="0" id="Apple"><!--Image-->
<canvas id="myCanvas"></canvas> <!-- canvas for the game-->
<button type="button" onclick="restartGame()"class="Restartbutton" id="myButton">Restart</button>
<textarea class="score"id="score" ></textarea>
<script src="snake.js"></script>
</div>
</body>
</html>
const Canvas = document.getElementById("myCanvas");<!-- start of JS-->
const ctx = Canvas.getContext("2d");
const imgApple = document.getElementById("Apple");
function draw(){
ctx.drawImage(imgApple,200,200,50,50);<!-- just random numbers to place the Apple at-->
ctx.fill();
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
I wanted to make an Snake game. I drew all the canvas and buttons for the game and now I just want to have a player or an Apple in the game as Images. I need help.
Thx already!
The problem is that you didn't specify initial dimensions for your canvas - thus it's using the defaults of width=300 and height=150. Of course this wouldn't be much of a problem if there wouldn't be this line:
ctx.drawImage(imgApple,200,200,50,50);
This means it tries to draw the apple at screen position x=200 and y=200 - outside of the visible area of the canvas.
Try it with
ctx.drawImage(imgApple,200,100,50,50);
i have a problem:
I'm working on map generator, using html canvas, the user inputs X,Y, width and height of an image.
But when i use drawImage with users input, the image doesn't fit the Canvas XY and the select height and width in pixels. Is there anything that I can use to solve this?
<html lang=''>
<head>
<title>Map tools</title>
</head>
<body>
<div align='center'>
<canvas id='map' class='mapcanvas' width="800" height="400">
</canvas>
<p>Send</p>
<textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
</div>
</body>
<script>
function loadXml(){
co = document.getElementById("xmlinput").value.split(',') // X, Y, H, L
canvas = document.getElementById("map");
context = canvas.getContext("2d");
ground.src = 'http://i.imgur.com/Z3DyMAM.png'
ground.onload = function (){
context.drawImage(ground, co[0], co[1], co[2], co[3]);
}
}
</script>
</html>
Ground was undefined. I've put it in for you.
<html lang=''>
<head>
<title>Map tools</title>
</head>
<body>
<div align='center'>
<canvas id='map' class='mapcanvas' width="800" height="400">
</canvas>
<p>Send</p>
<textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
<img id='ground' style='display: none' /> <!--You forgot the image!-->
</div>
</body>
<script>
function loadXml(){
var co = document.getElementById("xmlinput").value.split(','), // X, Y, H, L
canvas = document.getElementById("map"),
context = canvas.getContext("2d"),
ground = document.getElementById('ground'); //ground was undefined!
ground.src = 'http://i.imgur.com/Z3DyMAM.png'
ground.onload = function (){
context.drawImage(ground, co[0], co[1], co[2], co[3]);
}
}
</script>
</html>
Your code works perfectly.Just add this to the page(create an image object)
<!DOCTYPE html />
<html lang=''>
<head>
<title>Map tools</title>
</head>
<body>
<div align='center'>
<canvas id='map' class='mapcanvas' width="800" height="400">
</canvas>
<p>Send</p>
<textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
</div>
</body>
<script>
function loadXml(){
co = document.getElementById("xmlinput").value.split(',') // X, Y, H, L
canvas = document.getElementById("map");
context = canvas.getContext("2d");
var ground=new Image();
ground.src = 'http://i.imgur.com/Z3DyMAM.png'
ground.onload = function (){
context.drawImage(ground, co[0], co[1], co[2], co[3]);
}
}
</script>
</html>
I'm using a html 5 to draw a line on canvas with a button.
Does anybody know why?
<!DOCTYPE html>
<html>
<body onload="">
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<button name="draw" onclick="drawLine()">Draw Line</button>
<script type="text/javascript" src="canvashtml5.js" ></script>
</body>
</html>
darwLine function is on the external javascript as canvasHtml5.js:
function drawLine(){
var canvas = document.getElementById(myCanvas);
var context = canvas.getContext("2d");
context.moveTo(0,0);
context.lineTo(300,150);
context.stroke();
}
myCanvas
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FFFF00";
ctx.fillRect(0,0,150,75);
}
I forgot to put myCanvas to quot like this: "myCanvas".
this var canvas = document.getElementById(myCanvas); must be like var canvas = document.getElementById("myCanvas");
Alternative:
Add an event listener to your button like so:
document.getElementById('drawLineBtn').addEventListener('click', drawLine, false);
This will cut down on your work in the future. See http://jsfiddle.net/kbXAN/23/
I am learning HTML5 and can't get anything to appear on the screen. It just comes up totally white. All of the code is below.
HTML:
<head>
<script src="canvas.js"></script>
</head>
<body>
<section id="main">
<canvas id="canvas" width="600" height="400">
Get Chrome
</canvas>
</section>
</body>
</html>
JavaScript
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
canvas.shadowOffsetX = 4;
canvas.shadowOffsetY = 4;
canvas.shadowBlur = 6;
canvas.shadowColor = 'rgba(0,0,255,.5)';
canvas.font="36px Tahoma";
canvas.textAlign="end";
canvas.strokeText("omgjj", 300, 500);
}
window.addEventListener("load", doFirst, false);
Your Y coordinate is off the canvas. Change this:
canvas.strokeText("omgjj", 300, 500);
To this:
canvas.strokeText("omgjj", 300, 200);
And your text will appear: