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 () {.... }
Related
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>
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>
I'm attempting to make a responsive canvas game(using some code found here to keep width height 100%). In order to get the text responsive I'm using VW for the size. The problem is that even though I am calling the draw function on a resize, JavaScript still seems to be taking the VW dimension from the original size.(Although reloading the page does correctly size it).
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Game</title>
<style>
html body{
margin:0;
padding:0;
border:0;
}
#canvas{
display:block;
background-color: rgb(102,0,102);
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//change canvas size
function canvasSize(){
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
canvas.width = window.innerWidth * window.devicePixelRatio;
canvas.height = window.innerHeight * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
//draw function
function mainDraw(){
//changing coordinate x,y to centre of canvas
ctx.translate(canvas.width/2,canvas.height/2);
//drawing text;
ctx.font = "2vw Arial";
ctx.textAlign="center";
ctx.fillText("RoundCloud Christmas adventure",0,0);
// draw circle
ctx.beginPath();
ctx.arc(0,0,canvas.width / 100,0,Math.PI*2);
ctx.closePath();
ctx.fill();
}
window.onload = function(){
canvasSize();
mainDraw();
window.addEventListener('resize', canvasSize);
window.addEventListener('resize', mainDraw);
}
</script>
</body>
</html>
Canvas doesn't support css vw unit.
SO, you should use ...
ctx.font = 2 * window.innerWidth + "px Arial";
instead of ...
ctx.font = "2vw Arial";
Here is the working demo on jsFiddle
I have the following JavaScript file:
var canvas = document.getElementById('Canvas'),
context = canvas.getContext('2d'),
image = new Image();
image.src = 'abc.jpg';
image.onload = function(){
var cols = image.width;
var rows = image.width;
canvas.width = cols;
canvas.height = rows;
context.drawImage(image, 0, 0, image.width, image.height);
};
The HTML file looks as follows:
<html>
<head>
<title>chapter1</title>
<script src="matrix.js">
</script>
</head>
<body>
<canvas id="Canvas"></canvas>
</body>
</html>
But, when I try to view the HTML page, I don't see the image, provided that all the files including the image are in the same directory.
What am I doing wrong?
Thanks.
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
};