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')
Related
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" />
Hi i am trying to practice HTML 5 canvas. I just developed the code to make a triangle in a canvas. I am getting the canvas element using javascript and trying to draw a triangle in it. I don't know whats going wrong my javascript file is not getting linked or grabbing the canvas.
Html file code:
<!doctype html>
<html lang="en">
<head>
<meta charset= "UTF-8">
<style>
#canvas {
width: 400px;
height: 200px;
border: 1px solid red;
}
</style>
<script src="canvas.js"></script>
</head>
<body>
<canvas id="tcanvas">
</canvas>
</body>
</html>
Javascript code to draw in the canvas:
window.onload=init;
function draw() {
var canvas = document.getElementById('tcanvas');
var context=canvas.getContext("2d");
canvas.fillstyle="#0000FF";
context.lineWidth=3;
context.beginPath();
context.moveTo(50,100);
context.lineTo(150,100);
context.lineTo(100,50);
context.lineTo(50,100);
context.fill();
context.closePath();
}
draw();
init is undefined which means that your draw function is never invoked.
Check working example below which invokes draw on window.onload.
function draw() {
let canvas = document.getElementById('tcanvas');
let context = canvas.getContext("2d");
canvas.fillstyle = "#0000FF";
context.lineWidth = 3;
context.beginPath();
context.moveTo(50, 100);
context.lineTo(150, 100);
context.lineTo(100, 50);
context.lineTo(50, 100);
context.fill();
context.closePath();
}
window.onload = draw;
#canvas {
width: 400px;
height: 200px;
border: 1px solid red;
}
<canvas id="tcanvas"></canvas>
It does, you just have the init that is not defined and breaks up your code.
Possibly is defined elsewhere BUT contains error/s?
Another possible cause can be a canvasjs missing from where you linked it in your html, we cannot check that :)
Browser's console (F12) is your friend in situations like this.
Here is quick working fiddle
Note that this is the preferred way to show your code since it's more testable and easier to jump onto by others.
<canvas id="tcanvas">
function draw() {
var canvas = document.getElementById('tcanvas');
var context=canvas.getContext("2d");
canvas.fillstyle="#0000FF";
context.lineWidth=3;
context.beginPath();
context.moveTo(50,100);
context.lineTo(150,100);
context.lineTo(100,50);
context.lineTo(50,100);
context.fill();
context.closePath();
}
#canvas {
width: 400px;
height: 200px;
border: 1px solid red;
}
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);
}
My problem is I try to paint circles in an X position of a canvas and always painted with a difference of more than 100px I give. I see no pattern in terms of pixel added. The position of X given is that I need regarding this painting canvas where I do not need 100px or more. Leave a basic code sample.
Style
.defaul_paint
{
margin:1px auto;
overflow:hidden;
text-align:center;
float:right;
background:#394147;
max-width:660px;
width:660px;
height: 30px;
margin-bottom: 2px;
}
.paint{
margin:1px auto;
overflow:hidden;
text-align:center;
float:right;
max-width:660px;
height: 340px;
margin-bottom: 2px;
background:#394147;
}
JavaScript
function paint(xx, yy, radio, begin, grades, booleanVar, context) {
context.arc(xx, yy, radio, begin, (Math.PI * 2), booleanVar);
circle = new Circle(xx, yy, radio);
circles.push(circle);
}
function testing() {
var canvas, ctx;
canvas = $('.paint')[0];
ctx = canvas.getContext('2d');
ctx.fillStyle = '#FFF';
ctx.beginPath();
paint(47, 5, 5, 0, Math.PI * 2, true, ctx);
ctx.closePath();
ctx.fill();
}
HTML
<article class="defaul_paint">
<canvas class='paint'>
</canvas>
</article ">
Don't use CSS to resize your canvas--this will cause your pixels to be stretched.
Instead, resize the canvas element itself. This will add pixels to the canvas.
You don't show your Circle "class" here's a example code: http://jsfiddle.net/m1erickson/VkV9n/
<!doctype html>
<html>
<head>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
window.onload = function() {
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
function Circle(x,y,radius,fill){
this.x=x;
this.y=y;
this.radius=radius;
this.fill=fill;
}
Circle.prototype.draw=function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,Math.PI*2);
ctx.closePath();
if(ctx.fillStyle!=this.fill){ctx.fillStyle=this.fill;}
ctx.fill();
};
var c1=new Circle(150,150,100,"skyblue");
c1.draw();
}; // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
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.