I have an HTML page that allows a person to draw. Its very simple. The code for It is included down below.
I'm trying to add a button that inserts text that is editable and can be resized within the canvas element.
I have tried many options, but found no success. Is there a way to do that in Javascript?
The code I have:
<head>
<meta charset="utf-8">
<title>
Web Paint!
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#draw{
border-color: yellow;
}
</style>
</head>
<body>
<input id="hex" placeholder="enter hex color"></input>
<canvas id="draw"></canvas>
<script>
var canvas = document.getElementById("draw");
var ctx = canvas.getContext("2d");
//resize();
// resize canvas when window is resized
function resize() {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
// initialize position as 0,0
var pos = { x: 0, y: 0 };
// new position from mouse events
function setPosition(e) {
pos.x = e.clientX-160;
pos.y = e.clientY-5;
}
function draw(e) {
if (e.buttons !== 1) return; // if mouse is not clicked, do not go further
var color = document.getElementById("hex").value;
ctx.beginPath(); // begin the drawing path
ctx.lineWidth = 20; // width of line
ctx.lineCap = "round"; // rounded end cap
ctx.strokeStyle = color; // hex color of line
ctx.moveTo(pos.x, pos.y); // from position
setPosition(e);
ctx.lineTo(pos.x, pos.y); // to position
ctx.stroke(); // draw it!
}
// add window event listener to trigger when window is resized
window.addEventListener("resize", resize);
// add event listeners to trigger on different mouse events
document.addEventListener("mousemove", draw);
document.addEventListener("mousedown", setPosition);
document.addEventListener("mouseenter", setPosition);
</script>
</body>
Related
I need to prevent the cursor from going out of the window.
I've read that it's not possible, however I've already done that with a WebGL export from a Unity project. You first had to click the canvas, then the browser would show you a notification saying that you should press 'escape' to exit and get your cursor back.
Since a Unity WebGL canvas can do it, I assume it can be done without Unity?
Use the HTML5 Pointer Lock API
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Not my code example below, all creds to
https://github.com/mdn/dom-examples/tree/master/pointer-lock
HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Pointer lock demo</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="information">
<h1>Pointer lock demo</h1>
<p>This demo demonstrates usage of the pointer lock API. Click on the canvas area and your mouse will directly control the ball inside the canvas, not your mouse pointer. You can press escape to return to the standard expected state.</p>
</div>
<canvas width="640" height="360">
Your browser does not support HTML5 canvas
</canvas>
<div id="tracker"></div>
<script src="app.js"></script>
</body>
</html>
JS
// helper function
const RADIUS = 20;
function degToRad(degrees) {
var result = Math.PI / 180 * degrees;
return result;
}
// setup of the canvas
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var x = 50;
var y = 50;
function canvasDraw() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#f00";
ctx.beginPath();
ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
ctx.fill();
}
canvasDraw();
// pointer lock object forking for cross browser
canvas.requestPointerLock = canvas.requestPointerLock ||
canvas.mozRequestPointerLock;
document.exitPointerLock = document.exitPointerLock ||
document.mozExitPointerLock;
canvas.onclick = function() {
canvas.requestPointerLock();
};
// pointer lock event listeners
// Hook pointer lock state change events for different browsers
document.addEventListener('pointerlockchange', lockChangeAlert, false);
document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
function lockChangeAlert() {
if (document.pointerLockElement === canvas ||
document.mozPointerLockElement === canvas) {
console.log('The pointer lock status is now locked');
document.addEventListener("mousemove", updatePosition, false);
} else {
console.log('The pointer lock status is now unlocked');
document.removeEventListener("mousemove", updatePosition, false);
}
}
var tracker = document.getElementById('tracker');
var animation;
function updatePosition(e) {
x += e.movementX;
y += e.movementY;
if (x > canvas.width + RADIUS) {
x = -RADIUS;
}
if (y > canvas.height + RADIUS) {
y = -RADIUS;
}
if (x < -RADIUS) {
x = canvas.width + RADIUS;
}
if (y < -RADIUS) {
y = canvas.height + RADIUS;
}
tracker.textContent = "X position: " + x + ", Y position: " + y;
if (!animation) {
animation = requestAnimationFrame(function() {
animation = null;
canvasDraw();
});
}
}
The aim is to be able to draw a line starting with mousedown and finishing with mouseup. In between, the line is drawn onto the canvas with the draw() function while mousemouse. I need to clear the canvas while the line is dragged.
JS:
var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
var isDrawing = false;
var mX, mY, rX, rY;
function InitThis() {
c.onmousedown = function(e) {
isDrawing = true;
mX = e.clientX;
mY = e.clientY;
};
c.onmousemove = function(e) {
if (isDrawing) {
rX = e.clientX;
rY = e.clientY;
draw();
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
};
c.onmouseup = function(e) {
rX = e.clientX;
rY = e.clientY;
isDrawing = false;
}
}
function draw() {
ctx.beginPath();
ctx.moveTo(mX,mY);
ctx.lineTo(rX, rY);
ctx.closePath();
ctx.stroke();
}
InitThis()
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[draw lines with mouse]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas id="canvas1" width="800" height="900" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>
I get this error:
ReferenceError: canvas is not defined
at HTMLCanvasElement.InitThis.c.onmousemove (zivuqeyure.js:22:31)
How can I reference the canvas inside the function?
You are referencing a canvas object with the variable “c”.
This is the first line of code.
Later, you try to refer to the “canvas” variable, which is not defined. (You should use “c” instead of “canvas”)
The interpreter doesn’t know that by “canvas” you mean “the canvas object, which is stored in c”.
The interpreter does exactly what you tell it, but you tried to refer to a variable that doesn’t exist.
I'm a novice to html/css/js and am trying to learn canvas. I want to make a canvas that is the size of the window, no matter the size of the window, then I want to draw an additional rectangle within that window on which to start drawing a maze game. I got the canvas resize with window to work, but only by setting the body's overflow:hidden (when I didn't have that set, the height was always too large). I'm wondering if this is what is now causing a problem. When I try to create a smaller rectangle inside the main canvas rectangle, I set the rectangle width to half the window size but it goes far off the screen. What am I doing wrong? I just want the rectangle to be clearly within the perimeter of the main canvas so I can see all edges.
JS:
$(document).ready(function() {
var ctx;
var ww;
var wh;
drawcanvas();
$(window).resize(function() {
ctx.clearRect(0, 0, ww, wh); //won't this clear only the bottom rectangle?
drawcanvas();
});
function drawcanvas() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ww = window.innerWidth;
wh = window.innerHeight;
ctx.canvaswidth = ww;
ctx.canvas.height = wh;
ctx.fillStyle ="blue";
ctx.fillRect(0, 0, ww, wh);
ctx.strokeStyle = 'orange';
ctx.strokeRect(10, 20, ww/2, wh/2);
}
});
HTML:
<html>
<head>
<link href="maze2.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" type="text/javascript" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="maze2.js" type="text/javascript"></script>
<title>Maze</title>
</head>
<body>
<canvas id="canvas">Your browser does not support Canvas.</canvas>
</body>
</html>
CSS:
body {
width: 100%;
height: 100%;
margin:0px;
overflow:hidden;
}
#canvas {
width:100%;
height:100%;
margin:0px;
}
If you have set up your css correctly to have the canvas take the entire physical screen (inner screen) then the below will work.
Basically dont use window width and height, size the canvas properly with css and use the canvas clientWidth and height
$(document).ready(function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var cW;
var cH;
size();
drawcanvas();
$(window).resize(function() {
size();
drawcanvas();
});
function size(){
cW = canvas.clientWidth; // if you did your css correctly this will work
cH = canvas.clientHeight;
canvas.width = cW, // if the size has changed the canvas will be blanked out automatically
canvas.height = cH;
}
function drawcanvas() {
ctx.fillStyle ="blue";
ctx.fillRect(0, 0, cW, cH);
ctx.strokeStyle = 'orange';
ctx.strokeRect(10, 20, cW/2, cH/2);
}
});
P.S. format your code better next time
I am trying to animate a line in HTML5 canvas. The line is supposed to move according to the keyboard strokes (just as the red square). Unfortunately it gets longer but it should just move sideways...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Test</title>
</head>
<body onload="init();">
<canvas id="myCanvas" width="600" height="400">Your browser does not support the canvas tag.</canvas>
<script>
var canvas;
var ctx;
var incrementX = 0;
var x = 250;
var y = 350;
function init() {
// This function is called after the page is loaded
// 1 - Get the canvas
canvas = document.getElementById('myCanvas');
// 2 - Get the context
ctx = canvas.getContext('2d');
// 3 add key listeners to the window element
window.addEventListener('keydown', handleKeydown, false);
window.addEventListener('keyup', handleKeyup, false);
// 4 - start the animation
requestId = requestAnimationFrame(animationLoop);
}
function handleKeydown(evt) {
if (evt.keyCode === 37) {
//left key
incrementX = -1;
} else if (evt.keyCode === 39) {
// right key
incrementX = 1;
}
}
function handleKeyup(evt) {
incrementX = 0;
}
function animationLoop() {
// 1 - Clear
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 2 Draw
drawLine(x, y);
// 3 Move
x += incrementX;
// call again mainloop after 16.6 ms (60 frames/s)
requestId = requestAnimationFrame(animationLoop);
}
function drawLine(x, y) {
ctx.save();
ctx.translate(x, y);
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.stroke();
ctx.fillStyle='red';
ctx.fillRect(35,30,20,20);
ctx.restore();
}
</script>
</body>
</html>
I have found out that if i don't give canvas width and height via window.innerWidth/innerHeight line is drawn far above the actual mouse cursor. I mean I can not afford to give the canvas the whole width and height of the window. I mean there should be other divs, paragraphs etc . here I give width and height to my canvas 400px and 768px respectively. it is not behaving as it should be. I mean when I try to draw a line it appears far above my mouse cursor. How can I fix it?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Game Stage</title>
<script type="text/javascript">
var i=0;
var radius=10;
var lines;
var x,y;
var now_draw=false;
var i=0;
function loadCanvas(id) {
var canvas = document.createElement('canvas');
div = document.getElementById(id);
canvas.id = "CursorLayer";
canvas.width = 400;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
div.appendChild(canvas)
}
function nowdraw(e){
now_draw=true;
}
function drawit(e){
if(now_draw){
var ctx=document.getElementById("CursorLayer").getContext("2d");
x=e.clientX;
y=e.clientY;
if(i==0){
ctx.lineWidth=2*radius;
ctx.lineTo(x,y);
ctx.stroke();
}
if(i>0){
ctx.fillStyle="red";
ctx.beginPath();
ctx.arc(x,y,radius,0,2*Math.PI);
ctx.fill();
i=0;
}
ctx.fillStyle="red";
ctx.beginPath();
ctx.arc(x,y,radius,0,2*Math.PI);
ctx.fill();
ctx.lineWidth=2*radius;
ctx.strokeStyle="red";
ctx.beginPath();
ctx.moveTo(x,y);
}
}
function cannotdraw(){
now_draw=false;
i++;
}
window.onmousedown=nowdraw;
window.onmousemove=drawit;
window.onmouseup=cannotdraw;
</script>
</head>
<body>
<h1>draw here</h1>
<div id="divControls"></div>
<div id="divGameStage"></div>
<script type="text/javascript">
loadCanvas("divGameStage");
</script>
</body>
</html>
fiddle: jsfiddle
Use
x = e.offsetX || e.layerX || 0;
y = e.offsetY || e.layerY || 0;
instead of
x = e.clientX;
y = e.clientY;
Demo