Creating a canvas element using jquery

Question

I am new to jQuery can anyone tell how to do this?

I am doing this in between html code

<script>
var Canvas_width=400;
var Canvas_height=300;
var CanvasElement =$("<canvas width='" + Canvas_width + "'height='" + Canvas_height + "'></canvas>");
var canvas=CanvasElement.get(0).getContext("2d");

CanvasElement.appendTo('body');
canvas.fillStyle = "#000000";
canvas.fill();
</script>

Please post your **code as text** - you are expecting people to re-type your code when answering. — Filburt, Feb 05 '17 at 11:31
In [this](http://stackoverflow.com/q/10433046/2401386) question there are several answers that can help you. — Blauharley, Feb 05 '17 at 11:35
Possible duplicate of [Creating a canvas element and setting its width and height attributes using jQuery](http://stackoverflow.com/questions/10433046/creating-a-canvas-element-and-setting-its-width-and-height-attributes-using-jque) — Winter, Feb 05 '17 at 19:39

score 0 · Answer 1 · answered Feb 05 '17 at 11:41

0

You just need to create a rectangle the same size as your canvas before filling it:

canvas.rect(0, 0, Canvas_width, Canvas_height);

Demo

var Canvas_width = 400;
var Canvas_height = 300;
var CanvasElement = $("<canvas width='" + Canvas_width + "' height='" + Canvas_height + "'></canvas>");
var canvas = CanvasElement.get(0).getContext("2d");

CanvasElement.appendTo('body');
canvas.rect(0, 0, Canvas_width, Canvas_height); // <======= HERE
canvas.fillStyle = "#000000";
canvas.fill();

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Feb 05 '17 at 11:41

blex

24,941
5
39
72

Can you please tell me what this line does:::: var CanvasElement = $(""); – Manish Kumar Feb 05 '17 at 12:37
@ManishKumar It's using jQuery to create a `` HTML element (DOM element), of the width and height defined above. – blex Feb 05 '17 at 12:42
@blex.Sir.I want to set border to my canvas using canvas.style.border = "red 1px solid"; . It's not working here in my case on browser's console it is printing "Uncaught TypeError: Cannot set property 'border' of undefined at some line number". – Manish Kumar Feb 21 '17 at 10:00

score 0 · Answer 2 · answered Feb 05 '17 at 11:49

Here's how you should do it. Don't add the canvas context, add the element itself

var Canvas_width=400;
var Canvas_height=300;
var CanvasElement = $("<canvas width='" + Canvas_width + "'height='" + Canvas_height + "'></canvas>");
// Add the canvas element, not the context: CanvasElement[0].getContext('2d')
document.body.appendChild(CanvasElement[0]);

// Now create the canvas context, this is what you need to draw something
var canvasContext=CanvasElement[0].getContext("2d");
// call beginPath() before drawing on the canvas
canvasContext.beginPath();
// Select the rectangle inside your canvas in which you want to draw something
canvasContext.rect(0, 0, Canvas_width, Canvas_height);
canvasContext.fillStyle = "#000000";
canvasContext.fill();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Creating a canvas element using jquery

2 Answers2