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
– Filburt, Commented Feb 5, 2017 at 11:31
In this question there are several answers that can help you. — Blauharley
– Blauharley, Commented Feb 5, 2017 at 11:35
Possible duplicate of Creating a canvas element and setting its width and height attributes using jQuery — Winter
– Winter, Commented Feb 5, 2017 at 19:39

blex · Accepted Answer · 2017-02-05 11:41:17Z

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 5, 2017 at 11:41

blex

25.7k6 gold badges49 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Manish Kumar Over a year ago

Can you please tell me what this line does:::: var CanvasElement = $("<canvas width='" + Canvas_width + "' height='" + Canvas_height + "'></canvas>");

blex Over a year ago

@ManishKumar It's using jQuery to create a <canvas></canvas> HTML element (DOM element), of the width and height defined above.

Manish Kumar Over a year ago

@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".

DerpyNerd · Accepted Answer · 2017-02-05 11:49:44Z

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>

Collectives™ on Stack Overflow

Creating a canvas element using jquery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related