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).
Related
This code would satisfy me but for the text alignment. Both the top line and bottom line are not aligned in the center of the lines. Could you help me here?
function redrawMeme(image, topLine, bottomLine) {
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
ctx.textAlign = "center";
var height = Math.min(image.height, canvas.height);
var width = Math.min(image.width, canvas.width);
ctx.drawImage(image, 0, 0, width, height);
var font = "bold 24px verdana, sans-serif ";
ctx.font = font;
var fillStyle = "white";
ctx.fillStyle = fillStyle;
var strokeStyle = "black";
if (topLine) {
ctx.fillText(topLine, 50, 50);
ctx.strokeText(topLine, 50, 50);
};
if (bottomLine) {
ctx.fillText(bottomLine, 50, 350);
ctx.strokeText(bottomLine, 50, 350);
};
}
// The following code is just for the example:
const img = new Image(500, 500);
img.src = 'https://api.adorable.io/avatars/500/abott#adorable.png';
img.onload = function() {
redrawMeme(img, 'Top', 'Bottom');
}
<canvas id="canvas" width="500" height="500"></canvas>
It is because canvas text is center-aligned, so the left and right ends of each line depends on the text length. You can align them by setting their x coordinates to the center of the width, like this:
function redrawMeme(image, topLine, bottomLine) {
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
ctx.textAlign = "center";
var height = Math.min(image.height, canvas.height);
var width = Math.min(image.width, canvas.width);
ctx.drawImage(image, 0, 0, width, height);
var font = "bold 24px verdana, sans-serif ";
ctx.font = font;
var fillStyle = "white";
ctx.fillStyle = fillStyle;
var strokeStyle = "black";
var centerX = width / 2
if (topLine) {
ctx.fillText(topLine, centerX, 50);
ctx.strokeText(topLine, centerX, 50);
};
if (bottomLine) {
ctx.fillText(bottomLine, centerX, 350);
ctx.strokeText(bottomLine, centerX, 350);
};
}
// The following code is just for the example:
const img = new Image(500, 500);
img.src = 'https://api.adorable.io/avatars/500/abott#adorable.png';
img.onload = function() {
redrawMeme(img, 'Top', 'Bottom');
}
<canvas id="canvas" width="500" height="500"></canvas>
I need one help. I need to increase the font size using canvas and Javascript. I am explaining my code below.
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
ctx.font = "40px Calibri";
var y=10;
var cnt=0;
var bg;
var logo;
var bgLoaded = false;
var logoLoaded = false;
var dataURL='';
var str='Valid:'+$('#validfrm').val()+'-'+$('#validto').val();
canvas.width = bg.width;
canvas.height = bg.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(bg, 0, 0);
ctx.drawImage(logo, 20, 130);
ctx.fillStyle = 'black';
ctx.fillText($('#copTitle').val(), 160, 70);
ctx.fillText($('#coupondiscount').val(), 190, 110);
ctx.fillText($('#couponmessage').val(), 190, 150);
ctx.fillText(str, 60, 280);
Here I have set the high font size but the small text size is coming. Please help me to resolve this issue.
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 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);
Consider a simple canvas as
$(document).ready(function(){
draw();
});
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
How can I introduce variable into the jQuery function to draw several canvases with defined variable (e.g. color set).
In fact, I want to replace canvas id and its options (like color) with variable provided by draw(variables), e.g.draw(canvas_id, color, ...).
Example: (for creating several canvases on different DOM elements)
function draw(ccc) {
var canvas = document.getElementById(ccc);
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
draw(canvas1);
draw(canvas2);
try this:
function draw(id, clr, fill) {
var canvas = document.getElementById(id);
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = clr;
ctx.fillRect (fill);
}
}
Here is one way you could do it:
function draw(colors) {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
for(var i=0; i < colors.length; i ++){
ctx.fillStyle = colors[i];
ctx.fillRect (10*i, 10*i, 55, 50);
}
}
}
// define some colors in an array
var colors = ["rgb(200,0,0)","rgba(0, 0, 200, 0.5)","rgba(0, 128, 200, 0.5)"];
draw(colors);
EDIT
Here is jsfiddle example