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
Related
In a canvas, I have drawn two rectangles. In button click event, I want to redraw one rectangle out of these two rectangles I have drawn. How can I achieve this?
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.rect(10, 20, 150, 100);
ctx.fill();
ctx.rect(200, 20, 100, 100);
ctx.stroke();
change = () => {
//need to change height of second rectangle
alert('size changed')
}
jsFiddle link
In the above fiddle link, I want to change the height of the second rectangle . Can anyone suggest ideas to achieve thii?
Thanks in advance,
You need to redraw the canvas - i.e. redraw the background and the two rectangles, something like this:
ctx.fillRect(0, 0, canvas.width, canvas.height);
//change the size of one rectangle, then redraw both of them
ctx.rect(10, 20, 150, 100);
ctx.fill();
ctx.rect(200, 20, 200, 150);
ctx.stroke();
Another way would be to cover only the second rectangle with a white rectangle (or whatever background color you have), and redraw this second rectangle:
//draw first rectangle
ctx.rect(10, 20, 150, 100);
//cover old rectangle using a white rect
ctx.fillStyle = "white";
ctx.fill();
ctx.rect(200, 20, 100, 100);
//redraw second rectangle
ctx.fillStyle = "black";
ctx.fill();
ctx.rect(200, 20, 200, 150);
ctx.stroke();
You need to save the rectangle information and redraw them on each change.
This is because canvas doesn't store information as objects, but merely commits pixels.
//Setup canvas
var canvas = document.body.appendChild(document.createElement("canvas"));
var ctx = canvas.getContext('2d');
canvas.height = 200;
canvas.width = 400;
ctx.fillStyle = "red";
//Setup rectangles as objects
var rect1 = { x: 10, y: 20, w: 150, h: 100 };
var rect2 = { x: 200, y: 20, w: 100, h: 100 };
//Setup controls
var table = document.body.appendChild(document.createElement("table"));
var tr = table.appendChild(document.createElement("tr"));
tr.appendChild(document.createElement("td")).innerHTML = "X-position:";
var xInput = tr.appendChild(document.createElement("input"));
xInput.type = "number";
xInput.value = rect2.x.toString();
tr = table.appendChild(document.createElement("tr"));
tr.appendChild(document.createElement("td")).innerHTML = "Y-position:";
var yInput = tr.appendChild(document.createElement("input"));
yInput.type = "number";
yInput.value = rect2.y.toString();
tr = table.appendChild(document.createElement("tr"));
tr.appendChild(document.createElement("td")).innerHTML = "Width:";
var wInput = tr.appendChild(document.createElement("input"));
wInput.type = "number";
wInput.value = rect2.w.toString();
tr = table.appendChild(document.createElement("tr"));
tr.appendChild(document.createElement("td")).innerHTML = "Height:";
var hInput = tr.appendChild(document.createElement("input"));
hInput.type = "number";
hInput.value = rect2.h.toString();
//Draw function
function change() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
[rect1, rect2].forEach(function (rect) {
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
});
}
//initial draw
change();
//Redraw event
function redraw() {
rect2.x = parseInt(xInput.value, 10);
rect2.y = parseInt(yInput.value, 10);
rect2.w = parseInt(wInput.value, 10);
rect2.h = parseInt(hInput.value, 10);
change();
}
//Bind events
[xInput, yInput, wInput, hInput].forEach(function (input) {
input.addEventListener("change", redraw);
input.addEventListener("keyup", redraw);
});
I'm trying to clear only the strokeRect() and keep content in that rectangle.
In this example, how do I clear green rectangle without affecting the red one?
var cut = [50, 70, 100, 100]
var cut1 = [60, 85, 60, 60]
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(cut[0], cut[1], cut[2], cut[3]);
ctx.lineWidth = 3;
ctx.strokeStyle = 'green';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.rect(cut1[0], cut1[1], cut1[2], cut1[3]);
ctx.lineWidth = 3;
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.closePath();
<canvas id="canvas" width=400px height=200px></canvas>
Can't figure out how..
Thanks in advance!
You need to clear the canvas and draw the red rectangle again.
var c = document.getElementById("canvas");
c.width=400;
c.height=200;
var ctx = c.getContext("2d");
var cut = [50, 70, 100, 100]
var cut1 = [60, 85, 60, 60]
function drawRectangle(cut,fill){
ctx.beginPath();
ctx.rect(cut[0], cut[1], cut[2], cut[3]);
ctx.lineWidth = 3;
ctx.strokeStyle = fill;
ctx.stroke();
ctx.closePath();
}
drawRectangle(cut,"green");
drawRectangle(cut1,"red");
clear.addEventListener("click",()=>{
ctx.clearRect(0,0, c.width, c.height);
drawRectangle(cut1,"red");
});
canvas{display:block;}
<button id="clear">clear</button>
<canvas id="canvas" width=400px height=200px></canvas>
In your case, clear & redraw is what you really need, but just for completeness, to clear in any shape, you can use compositing operations.
By setting the compositing mode to destination-out, all the pixels that should normally have been filled by your drawings will actually get rendered as transparent.
So to make a simple clear-stroke-rect:
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 80, 80);
// clear
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = 5;
ctx.strokeRect(40,40,30,30);
// set back to 'normal'
ctx.globalCompositeOperation = 'source-over';
<canvas id="canvas"></canvas>
But using compositing, you can really clear in any shape, even from bitmap with transparency:
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 80, 80);
// clear
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage(img, 40,40);
// set back to 'normal'
ctx.globalCompositeOperation = 'source-over';
};
img.src = 'https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png';
<canvas id="canvas"></canvas>
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 not sure if that's the correct question. I'm not managing to set different colors to different objects.
As seen below they all become red,
function Body(x, y, w, h, color, mode){
...
this.color = color;
this.draw = function(){
ctx.fillRect(this.x, this.y, this.w, this.h);
ctx.fillStyle = this.color;
};
var hero = new Body(10, 50, 30, 40, "red", 1);
var page = new Body(500, 150, 5, 5, null, 0);
var poop = new Body(40, 50, 4, 4, null, 1);
var floor = new Body(30, 300, 600, 30, null, 0);
Even if I add ctx.fillStyle = null; after ctx.fillStyle = this.color;
And if I set the other objects to have to some specific color like this:
var hero = new Body(10, 50, 30, 40, "red", 1);
var page = new Body(500, 150, 5, 5, "blue", 0);
the code bugs and colors appear to be randomly given.
fillStyle sets the fill color for the shapes you draw after it. You can't modify what you've already drawn. Therefore change the order of the statements:
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.w, this.h);
This is a working example:
(function () {
"use strict";
var cvs, ctx;
cvs = document.getElementById("cvs");
ctx = cvs.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.fillRect(10, 10, 10, 10);
ctx.fillStyle = "#00ff00";
ctx.fillRect(20, 20, 10, 10);
ctx.fillStyle = "#0000ff";
ctx.fillRect(30, 30, 10, 10);
}());
<canvas id="cvs"></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.