JavaScript Scale Summary: in this tutorial, you’ll learn how to use the JavaScript scale() Canvas API to scale drawing objects effectively. Introduction to JavaScript scale() Canvas API The scale() is a method of the 2D drawing context. The scale() method adds a scaling transformation to the canvas units horizontally and/or vertically. The default unit on…
Read more
JavaScript Rotate Summary: in this tutorial, you’ll learn how to use the JavaScript rotate() method to rotate drawing objects. Introduction to JavaScript rotate() canvas API The rotate() is a method of the 2D drawing context. The rotate() method allows you to rotate a drawing object on the canvas. Here is the syntax of the rotate()…
Read more
JavaScript Translate Summary: in this tutorial, you’ll learn how to use the JavaScript translate() API to move the origin of the canvas to the new position. Introduction to the JavaScript translate() method. The translate() is a method of a 2D drawing context. The translate(x,y) method moves the canvas and its origin x units horizontally and…
Read more
JavaScript fillText Summary: in this tutorial, you’ll learn how to use the JavaScript fillText() method to draw a text string to a canvas. Introduction to the JavaScript fillText() method The fillText() is a method of a 2D drawing context. The fillText() method allows you to draw a text string at a coordinate with the fill…
Read more
How to Draw a Line in JavaScript Summary: in this tutorial, you’ll learn how to draw a line using the Canvas API. Steps for drawing a line in JavaScript To draw a line on a canvas, you use the following steps: First, create a new line by calling the beginPath() method. Second, move the drawing…
Read more
Canvas clearRect Summary: in this tutorial, you’ll learn how to use the clearRect() method to erase an area of the canvas. Introduction to the Canvas clearRect() method The clearRect() is a method of the 2D drawing context. The clearRect() method clears an area of the canvas by making that area transparent. In practice, you draw…
Read more
JavaScript strokeRect Summary: in this tutorial, you’ll learn how to use the JavaScript strockRect() method to draw an outlined rectangle on a canvas. Introduction to the JavaScript strokeRect() method The strokeRect() is a method of the 2D drawing context. The strokeRect() allows you to draw an outlined rectangle with the stroke style derived from the…
Read more
JavaScript fillRect Summary: in this tutorial, you’ll learn how to use the JavaScript fillRect() method to draw rectangles with a specified width and height on a canvas. Introduction to the JavaScript fillRect() method The fillRect() is a method of the 2d drawing context object. The fillRect() method allows you to draw a filled rectangle at…
Read more
JavaScript Canvas Summary: in this tutorial, you’ll learn about HTML Canvas and how to use JavaScript to draw on the canvas. Introduction to the HTML5 Canvas element HTML5 features the <canvas> element that allows you to draw 2D graphics using JavaScript. The <canvas> element requires at least two attributes: width and height that specify the…
Read more
JavaScript FileReader Summary: in this tutorial, you’ll learn about the JavaScript FileReader API and how to use it to implement the file upload. Introduction to the JavaScript FileReader API When you drag and drop files to the web browser or select files to upload via the file input element, JavaScript represents each file as…
Read more