I'm trying to make a 'draw' app, which allows the user to draw something by dragging their mouse over a canvas.
I want to draw a 'pixel' where the user drags their mouse, however: The location of the mouse and the location where the 'pixels' get drawn are not the same.
I've searched all over the internet but I don't know what the difference is with my version and with theirs.
Image:
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drawer</title>
<script src="jquery-2.2.1.min.js"></script>
<script src="scripting/draw.js"></script>
</head>
<body>
<canvas id="drawGround" style="width: 500px; height: 500px; margin: 0 auto; border: 1px solid black;"></canvas>
</body>
</html>
Code:
$(document).ready(function() {
var drawSize = 3;
var canDrawCanvas = false;
const canvasID = "#drawGround";
document.onmouseup = function() {
canDrawCanvas = false;
};
$(canvasID).mousedown(function() {
canDrawCanvas = true;
});
$(canvasID).mousemove(function(event) {
if (canDrawCanvas) handleDrawing(event);
});
function handleDrawing(mouseEvent) {
var canvas = document.getElementById(canvasID.substring(1));
var context = canvas.getContext('2d');
context.fillRect(mouseEvent.pageX, mouseEvent.pageY, drawSize, drawSize);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="drawGround" style="width: 500px; height: 500px; margin: 0 auto; border: 1px solid black;"></canvas>
Instead of scaling the canvas object with the "style" attribute, you should use the "width" and "height"-attributes in the canvas-element.
<canvas id="drawGround" width="500px" height="500px" style="margin: 0 auto; border: 1px solid black;"></canvas>
Then use the offsetX and offsetY parameters instead of pageX and pageY to get the tip position of the mouse:
function handleDrawing(mouseEvent) {
var canvas = document.getElementById(canvasID.substring(1));
var context = canvas.getContext('2d');
context.fillRect(mouseEvent.offsetX, mouseEvent.offsetY, drawSize, drawSize);
}
Related
Hey guy's I'm trying to make a snake game in JS. Right now I'm making the function that will determine the direction of the snake, but at the moment I just want to log the keycode of any given key to the console, but it comes up as undefined? Why is this? I have the keycode stored into a variable before I log it? thanks for the help:)
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
//set canvas dimension equal to css dimension
canvas.width = 750;
canvas.height = 500;
//create stroke
ctx.strokeStyle = 'limegreen';
ctx.strokeRect(375, 250, 15, 15);
//create square
ctx.fillStyle = 'limegreen';
ctx.fillRect(375, 250, 15, 15);
//read user's direction
document.addEventListener('keydown', changeDirection);
function changeDirection(e) {
let code = e.keycode;
console.log(code);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<style>
body {
background-color: #333;
}
canvas {
background-color: #4d4d4d;
margin: auto;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 750px;
height: 500px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
Try e.keyCode instead of e.keycode
How can I change the thickness of the pen on canvas with JQuery?
I have used a canvas and I want to put the range below the canvas and it should be hidden when the page is loaded and after clicking on a button it should be appeared.
body {
background: #384047;
font-family: sans-serif;
}
canvas {
background: #fff;
display: block;
margin: 50px auto 10px;
border-radius: 5px;
box-shadow: 0 4px 0 0 #222;
cursor: url(http://s8.picofile.com/file/8333405442/download.png), pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="001.css">
</head>
<body>
<canvas width="600" height="400" ></canvas>
</body>
</html>
Here's an example, I'll quickly explain:
You cannot change the width and height of the cursor property in CSS, only the x and y coordinates - read the MDN Reference. So to render a custom cursor, simply make a new Image object, set cursor: none; and render the custom cursor on the canvas like you would any other canvas element. The slider value scales the width and height of the cursor. If you have any questions, feel free to ask.
var canvas = document.getElementById("c"); //define DOM content
var ctx = canvas.getContext("2d");
var slider = document.getElementById("range");
var btn = document.getElementById("btn");
var clicked = false;
var cursor = new Image(); //load img
cursor.src = "cursor.png"; //change this to your img
cursor.w = cursor.h = 50;
btn.addEventListener("click", e => { //When btn is clicked
slider.style.display = "block"; //display range
});
c.addEventListener("mousemove", e => {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(cursor, e.pageX - cursor.w/2, e.pageY - cursor.h/2, cursor.w, cursor.h);
});
slider.addEventListener("click", e => {
check();
});
function check() {
if (slider.value !== cursor.w) { //if unique value
cursor.w = cursor.h = slider.value; //width and height scale based on slider
}
}
canvas {
cursor: none;
}
#range {
display: none;
}
<canvas id="c" width="600" height="400" ></canvas>
<input id="btn" type="button" value="activate" />
<input id="range" type="range" />
So when I try to draw image on canvas like this (it works fine):
<html>
<head>
<title>HTML5 canvas</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(start);
var image1;
function start() {
var ctx = $('#canvas').get(0).getContext('2d');
image1 = new Image;
image1.src = "/arenag/arenagimg/BeastBear.jpg";
image1.onload = function () {
ctx.drawImage(image1.src,200, 200, 100, 100);
};
}
</script>
<style type="text/css">
#framework {
border: 2px solid #000;
width: 100%;
text-align: center;
}
#canvas {
background-color: #00FFE2;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div id="framework">
<canvas id="canvas" width="1024" height="768"></canvas>
</div>
</body>
</html>
Then i add a folder called imagefactory.js and create a class ImageFactory,and create function in that class called drawImage:
var ImageFactory = function (ctx) {
this.ctx = ctx;
this.drawImage = function (image_arg, image_x, image_y, image_w, image_h) {
var _this = this;
var image = new Image;
image.src = image_arg;
image.onload = function () {
_this.ctx.drawImage(image.src, image_x, image_y, image_w, image_h);
};
};
};
Then I simply try to call that function in my main file:
<html>
<head>
<title>HTML5 canvas</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(start);
var image;
function start() {
image = '/arenag/arenagimg/BeastBear.jpg';
var ctx = $('#canvas').get(0).getContext('2d');
var imageFactory=new ImageFactory(ctx);
imageFactory.drawImage(image,200, 200, 100, 100);
}
</script>
<style type="text/css">
#framework {
border: 2px solid #000;
width: 100%;
text-align: center;
}
#canvas {
background-color: #00FFE2;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div id="framework">
<canvas id="canvas" width="1024" height="768"></canvas>
</div>
</body>
</html>
I get this error(on 36 line in my main (HTML) file where the canvas is) :
Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'
And also this bug which is connected to the other one(i mean when there is no this bug then there is no the first bug too):
[object%20HTMLImageElement]:1 GET http://phpcasovi.dev/arenag/klase/[object%20HTMLImageElement] 404 (Not Found)
And i wanted to just give you a help to solve this : When i change var image = new Image;to var image = {};in JS file.Then there is no bug but becuase var image is not equal to new Image well then there is no images at all.So i think bug is at that line where i say var image = new Image; but i dont know why there is a bug (why should it be)??
First argument for context.drawImage should be Image-Object not image.src
From docs, ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);, image, An element to draw into the context. The specification permits any canvas image source (CanvasImageSource), such as an HTMLImageElement, an HTMLVideoElement, an HTMLCanvasElement or an ImageBitmap.
var ImageFactory = function(ctx) {
this.ctx = ctx;
this.drawImage = function(image_arg, image_x, image_y, image_w, image_h) {
var _this = this;
var image = new Image();
image.src = image_arg;
image.onload = function() {
_this.ctx.drawImage(image, image_x, image_y, image_w, image_h);
};
};
};
$(document).ready(start);
function start() {
var image = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png';
var ctx = $('#canvas').get(0).getContext('2d');
var imageFactory = new ImageFactory(ctx);
imageFactory.drawImage(image, 200, 200, 100, 100);
}
#framework {
border: 2px solid #000;
width: 100%;
text-align: center;
}
#canvas {
background-color: #00FFE2;
margin-right: auto;
margin-left: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="framework">
<canvas id="canvas" width="1024" height="768"></canvas>
</div>
Fiddle Demo
I'am very new at this and I'm trying to create a signature drawing program in html, canvas and javascript.
Im trying to get the clear button working with this function;
function clearCanvas() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
But it does not seem to work. I don't really know where in the js script to put the function for it to be executed in the html code.
this is the html code:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="uppgift-6.js"></script>
<title>Uppgift6</title>
<style type="text/css">
#canvas { position: relative; }
#bildruta { border: 2px solid #000; }
body {font-family: Calibri}
h2 {font-size: 150%; color: BLACK; background-color: BEIGE; padding: 20px; margin: 5px auto; text-align: center;}
</style>
</head>
<body>
<h2>Signatur</h2>
<div id="canvas">
<canvas id="bildruta" width="600" height="400"></canvas>
</div>
<button type="button" onclick="clearCanvas()"> Clear signature </button>
</body>
</html>
Grateful for all help that i can get!
Your ID is not correct. Change your id or change the JS line like this:
function clearCanvas() {
var canvas = document.getElementById('bildruta'); // that's the correct ID
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
}
And it works.
var canvas = document.getElementById('canvas') points to this div <div id="canvas"> not to your canvas.
It should be document.getElementById('bildruta')
Here simple code1 which work fine Demo jsFiddle ,I want the same result in code2
Here the code2 Demo jsfiddle which have two problems.
The scale is not correct to 1400x700 pix
I can only successes to draw from inside function loadImage()
function loadImage(){
oG.width = 1400;
oG.height = 700;
oG.drawImage(scrollImg,0,0);
}
I want to draw from scrollObject.draw()
var scrollObject = {
draw : function() {
oG.drawImage(scrollImg,0,0);
}
};
How can I do that ?
Many thanks.
code1;
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#mycanvas{
border: 1px solid #9C9898;
}
</style>
</head>
<body >
<canvas id="mycanvas" width="1400" height="700" ></canvas>
<script type="text/javascript">
// get the canvas element using the DOM http://jsfiddle.net/centerwow/Z2UzF/show/
var context = document.getElementById('mycanvas').getContext("2d");
context.width = 1400 ;
context.height = 700 ;
var img = new Image();
img.src = "http://s9.postimage.org/433ecr79b/grid.png";
img.onload = function () {
context.clearRect(0,0,1400,700);
context.drawImage(img, 0, 0);
}
</script>
</body>
</html>
code2:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> image not display correct</title>
<style type='text/css'>
body {
background-color:black;
}
.Container {
position: relative;
margin-left:auto;
margin-right:auto;
top:10px;
background-image:url('http://s8.postimage.org/jnu65wk2d/Box_Grass200x100.jpg');
background-repeat:repeat;
width:1000px;
height:500px;
z-index:0;
overflow:hidden;
}
#layer1{
position:absolute;
padding:0;
margin: 0px;
z-index:2;
top:-100px;
left:-200px;
width:1400px;
height:700px;
}
</style>
</head>
<body >
<div class="Container">
<canvas id="layer1">LAYER1</canvas>
</div>
<script type='text/javascript'>//http://jsfiddle.net/centerwow/Z2UzF/1/show/
function loadImage(){
oG.width = 1400;
oG.height = 700;
oG.drawImage(scrollImg,0,0);
}
//layer 1 image then will be object objectGame = oG
var oG = document.getElementById('layer1').getContext("2d");
scrollImg = new Image();
scrollImg.src = "http://s9.postimage.org/433ecr79b/grid.png"; //image size 1400x700px
scrollImg.onload = loadImage;
var scrollObject = {
// Basic attributes
draw : function() {
oG.drawImage(scrollImg,0,0);
}
};
// Now moving it
function move() {
//handle with object background
//clearRect(x, y, width, height)
oG.clearRect(0,0,1400,700);
scrollObject.draw();
}
move();
</script>
</body>
</html>
You can only draw on loadImage(), because when you trigger move() the image have not been loaded yet. You can use a assetmanager to download your assets like images, sounds etc. Here is a great guide to build one - http://www.html5rocks.com/en/tutorials/games/assetmanager/
And for the scale, you can pass a width and height argument to the drawImage function.
context.drawImage(image, x, y, width, height);
You are also setting the height and width of the 2d-context, that you cannot do. Set the width and height in the <canvas> attributes. I once had problems with height/width when I used css, so I would not recommend setting the width/height there.