I have a canvas element:
<canvas id="canvas" width="100" height="100"></canvas>
And some JavaScript to make canvas full screen:
var canvas, ctx, w, h;
function start() {
canvas = $("#canvas")[0];
ctx = canvas.getContext("2d");
w = $('body').innerWidth();
$("#canvas").width(w);
$("#canvas").height(w);
w = $("#canvas").width();
h = $("#canvas").height();
if(typeof game_loop != "undefined") clearInterval(game_loop);
game_loop = setInterval(paint, 60);
}
function paint() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "blue";
ctx.strokeRect(0, 0, 50, 50);
}
I don't know why I get one big square not 50x50. Can you help?
To actually resize the canvas (as in have more pixles) you'll need to set the width/height attributes. jQuerys width()/height() sets the css values. Resulting in a stretched canvas element consisting of the same number of pixels as before. Instead use:
$('#canvas').prop({
width: 400, // the 400 is just arbitrary
height: 400
});
Or, as per Alnitaks comment, you could of course just as well assign the values directly:
canvas.width = 400;
canvas.height = 400;
Here is a simple example of drawing a square on resize using width/height.
Example: http://jsfiddle.net/Ubv7X/
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var paint = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Draw background
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw rect
var rect_size=50;
ctx.fillStyle = 'rgb(0, 0, 255)';
ctx.fillRect(canvas.width/2-(rect_size/2), canvas.height/2-(rect_size/2),
rect_size, rect_size);
}
setInterval(paint, 60);
Related
I am trying to separate canvas context from the actual draw functions but not working. As part of the context I wish to include the ability to resize the canvas which isn't working. The HTML works fine as this is evident with the getElementbyID working. The draw function which works fine is included for reference.
window.onload = function() {
'use strict';
var ctx = getCanvas();
draw(ctx);
}
function getCanvas() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width = 200;
var h = canvas.height = 150;
return ctx;
}
function draw(ctx) {
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);
}
I see no issues with your code. It works as expected.
window.onload = function() {
'use strict';
var ctx = getCanvas();
draw(ctx);
};
function getCanvas() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width = 200;
var h = canvas.height = 150;
return ctx;
}
function draw(ctx) {
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);
}
canvas{border: 1px solid black}
<canvas id="canvas" width="1000" height="1000"></canvas>
note: do not set canvas's width and height using css (in first place).
I'm using the multiply value for the globalCompositeOperation property to apply a tint to a clipped region of an image. It works, but the bottom edge of the image sometimes gets a white border.
// Code goes here
document.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById('myCanvas');
var img = new Image();
img.onload = function() {
render();
}
img.src = 'http://i.imgur.com/qiJkgK9.jpg';
function render() {
canvas.width = img.width * 2;
canvas.height = img.height * 2;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.save();
ctx.beginPath();
ctx.rect(200, 200, 200, 200);
ctx.clip();
ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = 'red';
ctx.fill();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.rect(300, 100, 200, 200);
ctx.clip();
ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = 'red';
ctx.fill();
ctx.restore();
}
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
How to prevent the border from appearing OR is there a better way to apply multiply tint to an image?
You can just use fillRect to the exact rectangle you're looking for instead of clip and fill, which is causing your clipping issue.
var canvas = document.getElementById('myCanvas');
function render() {
canvas.width = img.width * 2;
canvas.height = img.height * 2;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = 'red';
ctx.fillRect(200, 200, 200, 200);
ctx.fillRect(300, 100, 200, 200);
}
var img = new Image();
img.onload = render;
img.src = 'http://i.imgur.com/qiJkgK9.jpg';
<canvas id="myCanvas"></canvas>
I'm trying to just make a rectangle but nothing will appear, just the background. I've tried ctx.fill, ctx.fillStyle etc. nothing works:
I'm refering to this part
fill(77, 66, 66);
rect(10,200,100,100);
Here is the whole code for the page
var ctx, W, H;
window.onload = function() {
var canvas = document.getElementById("canvas");
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
ctx = canvas.getContext("2d");
setInterval(draw, 1);
function draw() {
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "#E6E6FF"; // this part does appear
ctx.fillRect(0, 0, W, H);
fill(77, 66, 66); // this doesn't appear
rect(10,200,100,100);
}
}
Thanks
You need to call fill and rect on the canvas context.
Also you need to change the fillStyle otherwise you're drawing a rectangle with the same color as the background and it won't show.
var ctx, W, H;
window.onload = function() {
var canvas = document.getElementById("canvas");
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
ctx = canvas.getContext("2d");
setTimeout(draw, 1);
function draw() {
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "#E6E6FF";
ctx.fillRect(0, 0, W, H);
ctx.fillStyle = "red"; // need this otherwise the rect will be the same color as the background
ctx.rect(10, 200, 100, 100); // needs to be called on the canvas context
ctx.fill(); // needs to be called on the canvas context, it will fill any path not already filled in.
}
}
You are filling both areas with the same color, and you have to use the context to perform fill functions. you also need to create the rect BEFORE you fill it.
Try this on for size: https://jsfiddle.net/szbk6f67/3/
var ctx, W, H;
window.onload = function () {
var canvas = document.getElementById("canvas");
W = 400;
H = 400;
canvas.width = W;
canvas.height = H;
ctx = canvas.getContext("2d");
setInterval(draw, 1);
function draw() {
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, W, H);
ctx.fillStyle = 'black';
ctx.rect(10, 200, 100, 100);
ctx.fill();
}
}
I am learning drawing canvas and now I have task. I need to add an image within the inner circle. The image position needs to be inside the circle. Also I attached the image with this post. My code are:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0,0,200,100);
var cicleT = document.getElementById("myCanvas");
var dtx = cicleT.getContext("2d");
dtx.arc(95,50,40,0,2*Math.PI);
dtx.stroke();
dtx.fillStyle = "red";
dtx.fill();
dtx.fillStyle = "black"; // font color to write the text with
var font = "bold 13px serif";
dtx.font = font;
dtx.textBaseline = "bottom";
dtx.fillText("Bangladesh",50,50, 95 ,25);
</script>
</body>
</html>
You can use ctx.clip to cut out the region you want to draw, and the following operation will be refined on the region, remember to restore when you complete the works that needs to be refined.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 200, 100);
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle = "red";
ctx.fill();
// For safety, I move the draw image and draw text to image.onload.
var image = document.createElement('img');
image.onload = function() {
var iw = image.width;
var ih = image.height;
var r = Math.sqrt(Math.pow(iw/2, 2) + Math.pow(ih/2, 2));
var ratio = 40 / r;
var tw = iw * ratio;
var th = ih * ratio;
// Use the same ctx is ok.
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
// Save the current state of context, which is not clipped yet.
ctx.save();
// Clip by the stroke.
ctx.clip();
// Draw image.
//
ctx.drawImage(image, 0, 0, iw, ih, 95 - tw/2, 50 - th/2, tw, th);
// Restore the context, otherwise the text will also be clipped.
ctx.restore();
ctx.fillStyle = "black"; // font color to write the text with
var font = "bold 13px serif";
ctx.font = font;
ctx.textBaseline = "bottom";
ctx.fillText("Bangladesh", 50, 50, 95, 25);
};
image.src = "https://i.stack.imgur.com/jy3YL.jpg";
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
just starting in JavaScript and I'm getting the error "canvas is null"
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width,height;
width = canvas.width;
height = canvas.height;
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect (10, 10, width, height);
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (posx, posy, 30, 30);
}
var posx;
var posy;
function getMouse(e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//Moz:IE
if (ev.pageX){
posx=ev.pageX;posy=ev.pageY//Mozilla or compatible
}
else if(ev.clientX){
posx=ev.clientX;posy=ev.clientY//IE or compatible
}
else{
return false//old browsers
}
document.getElementById('mydiv').firstChild.data='X='+posx+' Y='+posy;
}
setInterval(draw(),1000);
The code basically draws a box at the mouse position ( at least that's what it was suppose to do...)
Btw "canvas" is the id of the canvas.
THANKS!
Last line should be:
setInterval(draw,1000);
No parentheses. Otherwise you are CALLING the function, not PASSING it.