I'm trying to adjust the size to correctly be position more in the middle and a larger div. I would like it to be 500x500. What I'm trying to do is do a classic version of what Windows Paint is.
The issue is adjusting the 'canvas' to the middle stops the paint brush to 'draw'.
Here is the code, I have so far.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
width: 500px;
height: 500px;
margin: auto;
top: 50%;
left: 50%;
width: 90%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<div id="paint" >
<canvas id="myCanvas"></canvas>
</div>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var painting = document.getElementById('paint');
var paint_style = getComputedStyle(painting);
canvas.width = parseInt(paint_style.getPropertyValue('width'));
canvas.height = parseInt(paint_style.getPropertyValue('height'));
var mouse = {x: 0, y: 0};
canvas.addEventListener('mousemove', function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);
ctx.lineWidth = 10;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#00CC99';
canvas.addEventListener('mousedown', function(e) {
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);
canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onPaint, false);
}, false);
var onPaint = function() {
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
};
</script>
</body>
</html>
Get rid of the styling on body and replace it with this:
#paint {
height: 500px;
margin: auto;
width: 90%; /* you also had width: 500px, which one did you want? */
border: 3px solid #73AD21;
padding: 10px;
}
Fiddle - Looks like it's working okay with that change.
Related
There's any way to replicate this scale behavior in a div ?
Here's an example of the behavior I wanted to reproduce within the div. I already have the movement part, and I just wanted to know about the resizing.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
}
#wrapper {
position: relative;
border: 1px solid #9C9898;
width: 578px;
height: 200px;
}
#buttonWrapper {
position: absolute;
width: 30px;
top: 2px;
right: 2px;
}
input[type="button"] {
padding: 5px;
width: 30px;
margin: 0px 0px 2px 0px;
}
</style>
<script>
function draw(scale, translatePos) {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.translate(translatePos.x, translatePos.y);
context.scale(scale, scale);
context.beginPath(); // begin custom shape
context.moveTo(-119, -20);
context.bezierCurveTo(-159, 0, -159, 50, -59, 50);
context.bezierCurveTo(-39, 80, 31, 80, 51, 50);
context.bezierCurveTo(131, 50, 131, 20, 101, 0);
context.bezierCurveTo(141, -60, 81, -70, 51, -50);
context.bezierCurveTo(31, -95, -39, -80, -39, -50);
context.bezierCurveTo(-89, -95, -139, -80, -119, -20);
context.closePath(); // complete custom shape
var grd = context.createLinearGradient(-59, -100, 81, 100);
grd.addColorStop(0, "#8ED6FF"); // light blue
grd.addColorStop(1, "#004CB3"); // dark blue
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#0000ff";
context.stroke();
context.restore();
}
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var translatePos = {
x: canvas.width / 2,
y: canvas.height / 2
};
var scale = 1.0;
var scaleMultiplier = 0.8;
var startDragOffset = {};
var mouseDown = false;
// add button event listeners
document.getElementById("plus").addEventListener("click", function() {
scale /= scaleMultiplier;
draw(scale, translatePos);
}, false);
document.getElementById("minus").addEventListener("click", function() {
scale *= scaleMultiplier;
draw(scale, translatePos);
}, false);
// add event listeners to handle screen drag
canvas.addEventListener("mousedown", function(evt) {
mouseDown = true;
startDragOffset.x = evt.clientX - translatePos.x;
startDragOffset.y = evt.clientY - translatePos.y;
});
canvas.addEventListener("mouseup", function(evt) {
mouseDown = false;
});
canvas.addEventListener("mouseover", function(evt) {
mouseDown = false;
});
canvas.addEventListener("mouseout", function(evt) {
mouseDown = false;
});
canvas.addEventListener("mousemove", function(evt) {
if (mouseDown) {
translatePos.x = evt.clientX - startDragOffset.x;
translatePos.y = evt.clientY - startDragOffset.y;
draw(scale, translatePos);
}
});
draw(scale, translatePos);
};
jQuery(document).ready(function() {
$("#wrapper").mouseover(function(e) {
$('#status').html(e.pageX + ', ' + e.pageY);
});
})
</script>
</head>
<body onmousedown="return false;">
<div id="wrapper">
<canvas id="myCanvas" width="578" height="200">
</canvas>
<div id="buttonWrapper">
<input type="button" id="plus" value="+"><input type="button" id="minus" value="-">
</div>
</div>
<h2 id="status">
0, 0
</h2>
</body>
</html>
I tried to use css scale, but it resizes the div too, I want to modify only the space and the elements inside it.
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Paint, Inc.</title>
</head>
<body>
<div id="sideNav">
</div>
<canvas id="canvas"></canvas>
<script src="canvas.js"></script>
<button id="clear" title="Clear">X</button>
<section id="leftBumper"></section>
<section id="colorChoice">
<input id="color" type="color" value="#000000" />
<label id="colorLabel" for="color">Color</label>
</section>
<section id="strokeWeightChoice">
<input id="strokeWeight" type="range" min="1" max="51" step="5" value="1" list="tickmarks">
<label for="strokeWeight">Thickness</label>
<datalist id="tickmarks">
<option value="1"></option>
<option value="6"></option>
<option value="11"></option>
<option value="16"></option>
<option value="21"></option>
<option value="26"></option>
<option value="31"></option>
<option value="36"></option>
<option value="41"></option>
<option value="46"></option>
<option value="51"></option>
</datalist>
</section>
</body>
</html>
```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#canvas {
border: 0.0001px solid white;
}
html {
overflow: hidden;
}
#clear {
position: absolute;
top: 0;
left: 0;
bottom: -10px;
width: 30px;
background: rgba(70, 70, 70, 0.32);
border: rgba(70, 70, 70, 0.32);
border-width: 5px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
color: red;
}
#clear:hover {
transition: 0.4s;
background: rgba(20, 20, 20, 0.4);
cursor: pointer;
font-size: 32px;
}
#clear:focus {
outline: 0;
}
#colorChoice {
position: absolute;
bottom: 0.5rem;
right: 50%;
transform: translateX(50%);
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-weight: bold;
}
#colorChoice:hover {
cursor: pointer;
}
#strokeWeightChoice {
position: absolute;
bottom: 3rem;
right: 50%;
transform: translateX(50%);
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-weight: bold;
}
#strokeWeight {
width: 200px;
}
```
window.addEventListener("load", () => {
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
const color = document.querySelector("#color");
const strokeWeight = document.querySelector("#strokeWeight");
//variables
const clearButton = document.querySelector("#clear");
let painting = false;
function startPosition(e) {
painting = true;
draw(e);
}
function finishedPosition() {
painting = false;
ctx.beginPath();
}
function draw(e) {
if (!painting) return;
ctx.lineCap = "round";
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX, e.clientY);
}
function changeColor(e) {
const color = e.target.value;
ctx.strokeStyle = color;
}
function changeStrokeWeight(e) {
const strokeWeight = e.target.value;
ctx.lineWidth = strokeWeight;
}
//Event listeners
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mouseup", finishedPosition);
canvas.addEventListener("mousemove", draw);
color.addEventListener("input", changeColor);
strokeWeight.addEventListener("input", changeStrokeWeight);
//Buttons
clearButton.addEventListener("click", clearCanvas);
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
});
window.addEventListener("resize", resizeCanvas);
function resizeCanvas() {
//Resizing
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
}
resizeCanvas();
On my canvas whenever I draw while hovering over a button then moving my cursor back to the canvas causes me to draw without pressing until I press again. Could someone please tell me how to fix this glitch. This glitch occurs with my clear button, thickness slider, and my color changer. In addition how do I add something to stop drawing on the clear button.
Let me know if the following change to the javascript will work for you -
When draw() is called by a Mouse Move event it won't check if painting is set to true anymore rather it will check the status of the Mouse Event to see if they are holding down the left click that way when you go off the canvas and hover over one of the buttons and come back onto the canvas it will check to see if you have the left click held down and draw if that's true
Fiddle here if it helps
You can see more about those which properties here
window.addEventListener("load", () => {
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
const color = document.querySelector("#color");
const strokeWeight = document.querySelector("#strokeWeight");
//variables
const clearButton = document.querySelector("#clear");
let painting = false;
function startPosition(e) {
painting = true;
draw(e);
}
function finishedPosition() {
painting = false;
ctx.beginPath();
}
function draw(e) {
//if (!painting) return;
if(e.which == 1){
ctx.lineCap = "round";
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX, e.clientY);
}else{
finishedPosition();
}
}
function changeColor(e) {
const color = e.target.value;
ctx.strokeStyle = color;
}
function changeStrokeWeight(e) {
const strokeWeight = e.target.value;
ctx.lineWidth = strokeWeight;
}
//Event listeners
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mouseup", finishedPosition);
canvas.addEventListener("mousemove", draw);
color.addEventListener("input", changeColor);
strokeWeight.addEventListener("input", changeStrokeWeight);
//Buttons
clearButton.addEventListener("click", clearCanvas);
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
});
window.addEventListener("resize", resizeCanvas);
function resizeCanvas() {
//Resizing
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
}
resizeCanvas();
I'm trying out canvas for the first time. After creating a circle I want to be able to change the position of the center of this circle at the click of a button. But I am unable to figure how to do so. Can someone suggest a method for it?
#button{
height: 25px;
width:125px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
<html>
<head></head>
<body>
<div id="button" onclick="changePosition()">Click here</div>
<canvas id="testCanvas" width="500px" height="500px"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("testCanvas");
var a = canvas.getContext("2d");
a.fillStyle = "#b22222";
a.beginPath();
a.arc(100,100,25,0,2*Math.PI);
a.fill();
function changePosition(){
//what do I put here??
}
</script>
</body>
</html>
You need to redraw the scene. Create a function that resets the canvas and then draws the circle
var canvas = document.getElementById("testCanvas");
var ctx = canvas.getContext("2d");
var circlePos = {
left: 100,
top: 100,
}
function renderCircle( circlePos ) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#b22222";
ctx.beginPath();
ctx.arc(circlePos.left, circlePos.top, 25, 0, 2 * Math.PI);
ctx.fill();
}
function changePosition() {
circlePos.left += 10;
if ( circlePos.left > canvas.width ) {
circlePos.left = 0;
}
renderCircle( circlePos );
}
changePosition();
#button {
height: 25px;
width: 125px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
<button onclick="changePosition()">Click here</button>
<canvas id="testCanvas" width="500" height="200"></canvas>
I'm trying to create an interactive app to enable users to select the shape they want by clicking on the different buttons for the shapes and then enable them to draw the shape wherever they will click on the canvas.
This part is okay but when i click on a different button to draw a shape it seems that the previous shape comes along with the new shape and seems to be overlapped.
Here's the pic:
As you see, the rectangle and the round shape becomes overlapped.
I've tried to use layers of canvas to fix it but now the rectangle button is not working and the rounded shape is not appearing where the user clicks, rather like 30px away from it.
Here's the codes:
<!DOCTYPE html>
<html>
<head>
<script>
function initiateCanvasRectangle()
{
var ctx = document.getElementById('myCanvas1').getContext('2d');
ctx.canvas.addEventListener('mousemove', function(event) {
var mouseX = event.clientX - ctx.canvas.offsetLeft;
var mouseY = event.clientY - ctx.canvas.offsetTop;
});
ctx.canvas.addEventListener('click', function(event) {
var mouseX = event.clientX - ctx.canvas.offsetLeft;
var mouseY = event.clientY - ctx.canvas.offsetTop;
ctx.fillRect(mouseX,mouseY,100,50);
ctx.fillStyle = "purple";
});
}
function initiateCanvasCircle()
{
var ctx = document.getElementById('myCanvas2').getContext('2d');
ctx.canvas.addEventListener('mousemove', function(event) {
var mouseX = event.clientX - ctx.canvas.offsetLeft;
var mouseY = event.clientY - ctx.canvas.offsetTop;
});
ctx.canvas.addEventListener('click', function(event) {
var mouseX = event.clientX - ctx.canvas.offsetLeft;
var mouseY = event.clientY - ctx.canvas.offsetTop;
ctx.beginPath();
ctx.arc(mouseX, mouseY, 30, 0, 2 * Math.PI, false);
ctx.fillStyle = 'pink';
ctx.fill();
});
}
function rect(){
window.addEventListener('click', function(event) {
initiateCanvasRectangle();
});
}
function drawRect()
{
rect();
}
function circle(){
window.addEventListener('click', function(event) {
initiateCanvasCircle();
});
}
function drawCircle()
{
circle();
}
</script>
<style>
BUTTON.rect {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background-color: white;
border:2px solid black;
}
#tbl {
border-collapse:collapse;
}
</style>
</head>
<body>
<table border="1" id="tbl">
<tr><td><button class="circle" onclick="drawCircle(); return true;" style="padding:20px 40px 20px 40px;">Circle</button>
</td>
<td>
<button class="rect" onclick="drawRect(); return true;" style="padding:20px 40px 20px 40px;"></button>
</td></tr>
</table>
<p>
<div style="position: relative;">
<canvas id="myCanvas1" width="1100" height="400" style="position: absolute; left: 0; top: 0; z-index: 0; border:1px solid black"></canvas>
<canvas id="myCanvas2" width="1100" height="400" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
</body>
</html>
Can you tell me how to fix it? Any help will be much appreciated. Thanks.
I'm trying to draw into a canvas, but the more I go right, the more offset my drawing become.
Anyone have an idea why?
I have included the relevant code below:
CSS
html,body {
width:100%;
height:100%;
background:rgba(0,0,0,.2);
}
#container {
position:relative;
width:700px;
height:450px;
background:#fff;
overflow:hidden;
}
* {
-webkit-user-select: none;
}
canvas {
position: absolute;
top: 0;
left: 0;
background: #ccc;
width: 500px;
height: 200px;
}
HTML
<div id='adContainer'>
<canvas></canvas>
</div>
Javascript
var ctx;
var can = $('canvas');
$(document).ready(function() {
ctx = can[0].getContext('2d');
ctx.strokeStyle = "rgba(255,0,0,1)";
ctx.lineWidth = 5;
ctx.lineCap = 'round';
can.on("touchstart", function(event) {
event.preventDefault();
var e = event.originalEvent;
if(e.touches.length == 1) {
var posX = e.touches[0].pageX;
var posY = e.touches[0].pageY;
ctx.moveTo(posX, posY);
}
});
can.on("touchmove", function(event) {
event.preventDefault();
var e = event.originalEvent;
if(e.touches.length == 1) {
var posX = e.touches[0].pageX;
var posY = e.touches[0].pageY;
ctx.lineTo(posX, posY);
ctx.stroke();
}
});
});
Demo: http://jsfiddle.net/8Wtf8/
That is because you define the size of the canvas using CSS.
What happens is that when you don't explicitly define the size of the canvas using its width and height attributes the canvas defaults to size 300 x 150.
In your CSS you are then stretching the canvas element (look at it as an image) to 500px etc. - the content of the canvas is still 300 x 150.
You need to set the width and height on the canvas element itself:
<canvas width=500 height=200 id="myCanvas"></canvas>
and remove the definition from the CSS:
canvas {
position: absolute;
top: 0;
left: 0;
background: #ccc;
/*width: 500px;
height: 200px;*/
}
Also notice that background set by CSS will not be part of the canvas content.