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.
Related
I have a canvas like so:
But when resizing the window and redrawing, you can get anything in between.
I keep the aspect ratio with this code:
function setCanvasSize(){
ctx.canvas.width = (window.innerWidth)*0.8;
ctx.canvas.height= (window.innerWidth)*0.5;
}
setCanvasSize()
$(window).resize(function(){
setCanvasSize()
})
and that keeps it nice and clean, the same-looking size, but how many pixels are in there changes, so when my program draws, it's always in a different spot, although the aspect is the same, so it looks really weird.
Any way that I can somehow tweak how I draw things, or a way to keep how many pixels there are?
Edit: code snippet to reproduce
const ctx = document.getElementById('game').getContext("2d");
$('#game').css('width', '100%');
$(window).resize(function(){
$('#game').height($('#game').width() / 2.031);
});
const imageAt=((href,x,y,sizex,sizey)=>{
var img = new Image();
img.addEventListener('load', function() {
ctx.drawImage(img, x, y, sizex, sizey);
}, false);
img.src = href
})
imageAt('https://b.thumbs.redditmedia.com/bZedgr0gq7RQBBnVYVc-Nmzdr-5vEUg4Dj8nTrMb7yA.png',0,0,50,50)
#game{
padding-left: 0;
padding-right: 0;
display: block;
margin: 0;
border:5px solid green;
padding:0;
}
#vertical-center {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: black;
padding:0;
}
body{
background-color: black;
padding:0;
}
<html>
<head>
<title>Tiled Canvas Engine Test 1</title>
<meta name="viewport" content="width=device-width, initial-scale=0.75">
<link rel="stylesheet" href="./index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="engine.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<div id="vertical-center">
<canvas id="game"></canvas>
</div>
</body>
</html>
In order to render properly the canvas element needs to have its width and height attributes set explicitly. This will define the viewport into which graphics will be draw. The style attributes for width and height which is what jQuery sets via the width() and height() functions will only stretch the viewport to fit. (Note: for high DPI displays, i.e. Retina, you will want to double the dimensions when specifying the attributes).
The critical change is this:
// Updates the actual width and height attributes
canvas.width = $('#game').width() * window.devicePixelRatio;
canvas.height = $('#game').height() * window.devicePixelRatio;
The snippet below also handles clearing the canvas, redrawing the image, and saving the Image once loaded:
const ctx = document.getElementById('game').getContext("2d");
$('#game').css('width', '100%');
$(document).ready(handleResize);
$(window).resize(handleResize);
function handleResize() {
// sets the style.height and style.width for the canvas
$('#game').height($('#game').width() / 2.031);
let canvas = $('#game').get(0);
// Updates the actual width and height attributes
canvas.width = $('#game').width() * window.devicePixelRatio;
canvas.height = $('#game').height() * window.devicePixelRatio;
// redraw
if (img) {
redraw();
}
}
var img;
const imageAt = ((href, x, y, sizex, sizey) => {
img = new Image();
img.addEventListener('load', function() {
ctx.drawImage(img, x, y, sizex, sizey);
}, false);
img.src = href
})
imageAt('https://b.thumbs.redditmedia.com/bZedgr0gq7RQBBnVYVc-Nmzdr-5vEUg4Dj8nTrMb7yA.png', 0, 0, 50 * window.devicePixelRatio, 50 * window.devicePixelRatio)
function redraw() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0, 0, 50 * window.devicePixelRatio, 50 * window.devicePixelRatio);
}
#game {
padding-left: 0;
padding-right: 0;
display: block;
margin: 0;
border: 5px solid green;
padding: 0;
}
#vertical-center {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: black;
padding: 0;
}
body {
background-color: black;
padding: 0;
}
<html>
<head>
<title>Tiled Canvas Engine Test 1</title>
<meta name="viewport" content="width=device-width, initial-scale=0.75">
<link rel="stylesheet" href="./index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="engine.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<div id="vertical-center">
<canvas id="game"></canvas>
</div>
</body>
</html>
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'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);
}
I want to dynamically create 6 boxes when the page is loaded. They should be inline-block, so eventually it will look like 3 lines, with 2 boxes on each line.
I tried the code below without any JavaScript (just used some static HTML and CSS), and it seemed to work fine.
Generally, the script looks fine to me -- however, it does nothing. What am I doing wrong? Is it something about the order of the CSS and the JavaScript?
style1.css:
* {
margin:0;
padding:0;
}
header,section,nav,aside,footer{
display:block;
}
.wrapper{
position: relative;
height: 2150px;
width: 900px;
background-color: #336b98;
margin: 0 auto;
}
section#contentSection_layout3{
position: absolute;
top:193px;
height: 1957px;
width: 900px;
border-right: solid 1px #FFF;
}
HTML & JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="includes/style1.css">
<script src="includes/JavaScript.js"></script>
<title> EX </title>
<script>
window.onload = function(){
var boxesNum = 6;
for(var i = 0; i < boxesNum; i++){
var rect = new rect();
rect.setAttribute('display', 'inline-block');
rect.setAttribute('margin-left', '200');
rect.setAttribute('margin-top', '100');
rect.setAttribute('height', '150');
rect.setAttribute('width', '150');
rect.setAttribute('background-color', '#FFF');
document.getElementById('contentSection_layout3').appendChild(rect);
}
};
</script>
</head>
<body>
<div class="wrapper">
<section id="contentSection_layout3"></section>
</div>
</body>
</html>
var rect = new rect();
Unless you have defined rect elsewhere, you want:
var rect = document.createElement('div');
Also, setAttribute is not for styles, style is for styles.
rect.style.display = 'inline-block';
rect.style.marginLeft '200px';
rect.style.marginTop = '100px';
rect.style.height = '150px';
rect.style.width = '150px';
rect.style.backgroundColor = '#FFF';
Also, don't forget your pxs.