I'm having trouble understanding why my code won't draw a square border on the canvas. I just started learning this stuff, and I'm afriad I'm missing something obvious...
<!DOCTYPE html>
<head>
<style type="text/css">
canvas {
background-image: url(uploads/1504975677.jpg);
width: 500px;
height: 334px;
}
</style>
<script type="text/javscript">
var x = 100;
var y = 100;
var width = 50;
var height = 50;
var canvas = document.getElementById('image');
var context = canvas.getContext('2d');
context.strokeStyle = 'white';
context.strokeRect(x, y, width, height);
</script>
<title>Test Website</title>
</head>
<body>
<canvas id="image"></canvas>
</body>
</html>
To clarify, I'm not trying to create a border for the canvas, I just want a box that is not filled in. All I get with this code is the background image and nothing drawn on top of it.
Below should be the format put your script before closing the body tag, Also change the color :-p
<!DOCTYPE html>
<head>
<style type="text/css">
canvas {
background-image: url(uploads/1504975677.jpg);
width: 500px;
height: 334px;
}
</style>
<title>Test Website</title>
</head>
<body>
<canvas id="image"></canvas>
<script type="text/javscript">
var x = 100; var y = 100; var width = 50; var height = 50; var canvas = document.getElementById('image'); var context = canvas.getContext('2d'); context.strokeStyle = 'black'; context.strokeRect(x, y, width, height);
</script>
</body>
</html>
var x = 100; var y = 100; var width = 50; var height = 50; var canvas = document.getElementById('image'); var context = canvas.getContext('2d'); context.strokeStyle = 'black'; context.strokeRect(x, y, width, height);
canvas {
width: 500px;
height: 334px;
}
<canvas id="image"></canvas>
Related
I am trying to make a long drawing canvas, but users can exit drawing mode and go to Hand scroll mode just like you normally scroll website on your phone.
I was thinking to add a scrollbar on the side of the canvas. But it would be better if we can scroll the canvas normally like we reading a website on phone.
html,css code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />
<style>
.container {
margin: 10px;
overflow: scroll;
}
#main {border: 1px solid #0000ff; overflow: scroll;}
</style>
<script src="draw.js"></script>
</head>
<body>
<div class="container">
<button id="clear">clear button that will clear teh canvas</button><br>
<canvas id="main" width="250" height="1000"></canvas>
</div>
</body>
</html>
javascript code for touch drawing:
window.onload = function() {
document.ontouchmove = function(e){ e.preventDefault(); }
var canvas = document.querySelector('#main');
// const width = canvas.width = window.innerWidth;
// const height = canvas.height = window.innerHeight;
var canvastop = canvas.offsetTop;
var context = canvas.getContext("2d");
var lastx;
var lasty;
context.strokeStyle = "#000000";
context.lineCap = 'round';
context.lineJoin = 'round';
context.lineWidth = 5;
function clear() {
context.fillStyle = "#ffffff";
context.rect(0, 0, 300, 300);
context.fill();
}
function dot(x,y) {
context.beginPath();
context.fillStyle = "#000000";
context.arc(x,y,1,0,Math.PI*2,true);
context.fill();
context.stroke();
context.closePath();
}
function line(fromx,fromy, tox,toy) {
context.beginPath();
context.moveTo(fromx, fromy);
context.lineTo(tox, toy);
context.stroke();
context.closePath();
}
canvas.ontouchstart = function(event){
event.preventDefault();
lastx = event.touches[0].clientX;
lasty = event.touches[0].clientY - canvastop;
dot(lastx,lasty);
}
canvas.ontouchmove = function(event){
event.preventDefault();
var newx = event.touches[0].clientX;
var newy = event.touches[0].clientY - canvastop;
line(lastx,lasty, newx,newy);
lastx = newx;
lasty = newy;
}
var clearButton = document.getElementById('clear')
clearButton.onclick = clear
clear()
}
I don't really understand what you'd like to do. However no need to add 'scroll' to everything.
Try this:
.container {
margin: 10px;
}
#main {
border: 1px solid #0000ff;
width: 250px;
height:600px;
overflow-y: auto
}
And then:
<canvas id="main"></canvas>
In this way your canvas will get a vertical scroll only if its contents is more than 600px, and at the same time you'll be able to scroll the page in a normal way.
iam trying to force my html button to draw a circle on canvas area but I dont know what Iam doing wrong. Can some1 point it for me?
JavaScript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Funkcja
function drawCircle(size,xPos,Ypos,colour){ //draw circle
var xPos = Math.floor(Math.random() * 501);
var yPos = Math.floor(Math.random() * 501);
var size = Math.floor(Math.random() * 100);
var colour = '#' + Math.random().toString(16).substring(4); // random colour;
ctx.beginPath();
ctx.arc(xPos,yPos,size,0,2*Math.PI);
ctx.fillStyle = colour;
ctx.fill();
}
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="site.css">
<script type="text/javascript" src="site.js"></script>
</head>
<body>
<button style="margin:0;padding:0;position:relative;left:50px;top:50px;" onclick="drawCircle()">Draw Random Circle</button><br>
<div style = "width:500px; height:150px; margin:0 auto; padding:5px;">
<canvas id = "canvasArea" width = "500" height = "550" style = "border:2px solid black"></canvas>
</div>
</body> </html>
As Diego sais: wrong id.
Also, you better use HTML elements inside a function that's only triggered after the page is loaded.
Edit: Math.random produces a number between 0 and 1. So let's skip the "0."
so a substring from character 2, 6 characters long.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="site.css">
<script type="text/javascript">
// global variables
var canvas;
var ctx;
// You do not have permission to read from ( nor write to ) HTML elements before the DOM is loaded.
window.onload = function() {
canvas = document.getElementById("canvasArea");
ctx = canvas.getContext("2d");
}
// Funkcja
function drawCircle(size, xPos, Ypos, colour) { //draw circle
var xPos = Math.floor(Math.random() * 501);
var yPos = Math.floor(Math.random() * 501);
var size = Math.floor(Math.random() * 100);
var colour = '#' + Math.random().toString(16).substr(2,6); // random colour;
// var colour = '#' + Math.random().toString(16).substring(4); // random colour;
ctx.beginPath();
ctx.arc(xPos, yPos, size, 0, 2 * Math.PI);
ctx.fillStyle = colour;
ctx.fill();
}
</script>
</head>
<body>
<button style="margin:0;padding:0;position:relative;left:50px;top:50px;" onclick="drawCircle()">Draw Random Circle</button><br>
<div style="width:500px; height:150px; margin:0 auto; padding:5px;">
<canvas id="canvasArea" width="500" height="550" style="border:2px solid black"></canvas>
</div>
</body>
</html>
You got the wrong ID in line:
var canvas = document.getElementById("myCanvas");
It must be:
var canvas = document.getElementById("canvasArea");
And thats it.
var canvas = document.getElementById("canvasArea");
var ctx = canvas.getContext("2d");
// Funkcja
function drawCircle(size,xPos,Ypos,colour){ //draw circle
var xPos = Math.floor(Math.random() * 501);
var yPos = Math.floor(Math.random() * 501);
var size = Math.floor(Math.random() * 100);
var colour = '#' + Math.random().toString(16).substring(4); // random colour;
ctx.beginPath();
ctx.arc(xPos,yPos,size,0,2*Math.PI);
ctx.fillStyle = colour;
ctx.fill();
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="site.css">
<script type="text/javascript" src="site.js"></script>
</head>
<body>
<button style="margin:0;padding:0;position:relative;left:50px;top:50px;" onclick="drawCircle()">Draw Random Circle</button><br>
<div style = "width:500px; height:150px; margin:0 auto; padding:5px;">
<canvas id = "canvasArea" width = "500" height = "550" style = "border:2px solid black"></canvas>
</div>
</body> </html>
Why does the image not display to the canvas in this example?
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
/*
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
screen.lockOrientation('landscape');
if (lockOrientation("landscape-primary")) {
screen.lockOrientation('landscape');
}
*/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 10;
var y = 10;
var width = 470;
var height = 310;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</head>
<body>
<canvas id="myCanvas" width="470" height="310" style="border:5px solid #123456;"></canvas>
</body>
</html>
You need to wait for the document to load before trying to select elements in the page.
Try wrapping your code like this:
window.onload = function() {
// your code goes here
};
I am able to upload an image to the browser and convert it to a BLOB. After that I attempt to draw it into my canvas but it's not being recognized. I have a feeling it is something small that I am missing but I can not see it. Any help would be awesome!
var resize_img =
function(){
var file = document.getElementById("add_img").files;
// add in file type checker
// Create img element to PREVIEW
var img = document.createElement("img");
img.src = window.URL.createObjectURL(file[0]);
// Draw image to CANVAS
var canvas_e = document.getElementById("canvas_img");
var ctx = canvas_e.getContext("2d");
ctx.drawImage(img, 0, 0);
//Resize Image
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas_e.width = width;
canvas_e.height = height;
ctx.drawImage(img, 0, 0, width, height);
//Push Data
var dataurl = canvas_e.toDataURL("image/png");
console.log(dataurl);
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- CSS -->
<link href="css/main.css" rel="stylesheet" type="text/css" >
</head>
<body>
<input type="file" id="add_img" onchange="resize_img()">
<canvas id="canvas_img"></canvas>
<!-- JS -->
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>
put the canvas code in img.onload=function () {.... }
http://jsbin.com/oMUtePo/1/edit
I've been having a pain trying to get canvas to fill the whole page.
I tried using...
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
It filled the width, but not the height, and the drawing board was drawing 1px lines, which is not what I want.
When using 100% for width and height in CSS the width is scaled, and the height is cut, when drawing it looks as if a raster image was scaled significantly larger in ms paint and there's a large offset on onmousedown drawing which is obviously not what I want.
Any help would be greatly appreciated.
Full Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Drawing Board</title>
<style>
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
#myCanvas {
cursor: crosshair;
position: absolute;
width: 100%;
height: 100%;
}
</style>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script type="text/javascript">
window.onload = function() {
var myCanvas = document.getElementById("myCanvas");
var curColor = $('#selectColor option:selected').val();
var ctx = myCanvas.getContext("2d");
ctx.fillStyle="#000";
ctx.fillRect(0,0,500,500);
if(myCanvas){
var isDown = false;
var canvasX, canvasY;
ctx.lineWidth = 5;
$(myCanvas)
.mousedown(function(e){
isDown = true;
ctx.beginPath();
canvasX = e.pageX - myCanvas.offsetLeft;
canvasY = e.pageY - myCanvas.offsetTop;
ctx.moveTo(canvasX, canvasY);
})
.mousemove(function(e){
if(isDown !== false) {
canvasX = e.pageX - myCanvas.offsetLeft;
canvasY = e.pageY - myCanvas.offsetTop;
ctx.lineTo(canvasX, canvasY);
ctx.strokeStyle = "white";
ctx.stroke();
}
})
.mouseup(function(e){
isDown = false;
ctx.closePath();
});
}
};
</script>
</head>
<body>
<canvas id="myCanvas">
Sorry, your browser does not support HTML5 canvas technology.
</canvas>
</body>
</html>
You have to set the absolute size in pixels on the canvas element and not with CSS as you do in the demo, so first remove the following lines from the CSS rule:
#myCanvas {
cursor: crosshair;
position: absolute;
/*width: 100%; Remove these */
/*height: 100%;*/
}
Then add this to your code - you need to use clientWidth/Height of the window object.
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;
var ctx = myCanvas.getContext("2d");
ctx.fillStyle="#000";
ctx.fillRect(0,0, myCanvas.width, myCanvas.height);
Your modified JSBIN.