HTML Canvas working with JQuery and JavaScript

You can use JavaScript or JQuery to work with HTML Canvas. There is not much difference in code, but you have to change the HTML COM and drawing object.
Here is a comparison

JQuery

JavaScript

<script>
$(document).ready(function() {
/////////
var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
gctx.fillStyle= '#0046f5';
gctx.font = '46px serif';
gctx.fillText('plus2net.com', 100,150);
////////
})
</script>


<script>
var my_canvas=document.getElementById("my_canvas");
var gctx = my_canvas.getContext("2d");
gctx.fillStyle= '#0046f5';
gctx.font = '46px serif';
gctx.fillText('plus2net.com', 100,150);
</script>

To use JQuery we need to load or include respective Library files.

Why we are using JQuery here.

For many tutorials on Canvas , we have added slider widgets for better understanding of the user. While using Demo scripts user can change the values by slider and observe the effects. Such type of changes by adding widgets can only be done by using JQuery UI. However the basic code remain same and it can be used using JavaScript.

<canvas> JavaScript or JQuery

JQuery

JavaScript

Why we are using JQuery here.

Subscribe