graphicjs
This is a module for manipulating media elements and for graphics processing.
Installation
npm install graphicjs;
API
Changelog
Examples
There are some examples in "./examples" in this package.Here is the first one to get you started.
Usage
Actual dimensions of media elements.
; // Actual dimensions of the imagegraphicjs;// { width: 320, height: 240 } // Actual dimensions of the videographicjs;// { width: 320, height: 240 }
Load state of media elements.
; // Image loading complete statusgraphicjs;// TRUE or FALSE // Video loading complete statusgraphicjs;// TRUE or FALSE
Wait for the media element to finish loading.
; // Wait for the image to load.await graphicjs; // Wait for the video to load.await graphicjs;
Get the coordinates of the rotated rectangle.
<canvas id="myCanvas" width="400" height="300" style="background: black;"></canvas> ; // Draw a rectangleconst myCanvas = document;const ctx = myCanvas;const x = 150;const y = 75;const width = 100;const height = 150; ctxfillStyle = 'blue';ctx; // Rotated coordinates of the rectangleconst degree = 45;const coordinates = graphicjs; // Draw a rotated rectanglectx;ctx;ctx;ctx;ctx;ctx;ctxlineWidth = 2;ctxstrokeStyle = 'yellow';ctx;
Get rotated coordinates
<canvas id="myCanvas" width="400" height="300" style="background: black;"></canvas> ; // Canvas center coordinatesconst myCanvas = document;const cx = / 2;const cy = / 2; // Draw a point on the circle with the center of the canvas as the origin.const x = 80;const y = 80;const pointColors = 'red' 'orange' 'yellow' 'green' 'aqua' 'blue' 'purple' for let i=0; i<pointColorslength; i++ for let degree=0; degree<360; degree+=4 const coordinate = graphicjs; graphicjs;
Get the center of multiple coordinates.
<canvas id="myCanvas" width="400" height="300" style="background: black;"></canvas> ; // Returns a random integer from min to max { min = Math; max = Math; return Math + min;} // Returns random coordinates { const maxX = ; const maxY = ; return ...ArraynumberOfCoordinates;} // Draw multiple pointsconst myCanvas = document;const coordinates = ;for let x y of coordinates graphicjs; // Draw the center point of multiple pointsconst x y = graphicjs;graphicjs;
Get the angle of two coordinates.
<canvas id="myCanvas" width="400" height="300" style="background: black;"></canvas> ; const myCanvas = document;const ctx = myCanvas;const cx = / 2;const cy = / 2; // Write the axisgraphicjs;graphicjs; // Draw a point at an angle of 45 degrees from the centerlet x = cx + 50;let y = cy + 50;graphicjs;let degree = graphicjs;graphicjs; // Draw a point at an angle of 90 degrees from the centerx = cx + 0;y = cy + 100;graphicjs;degree = graphicjs;graphicjs; // Draw a point at an angle of -135 degrees from the centerx = cx - 100;y = cy - 100;graphicjs;degree = graphicjs;graphicjs;
Get the distance between two coordinates.
; // Distance between coordinates (0, 0) and (200, 150)graphicjs;// 250
Fit media element dimensions to parent.
<h1>Original</h1><img src="sample.png"><h1>Contain</h1><div id="parent1" style="width: 320px; height: 240px;"><img id="img1" src="sample.png"></div><h1>Cover</h1><div id="parent2" style="width: 320px; height: 240px;"><img id="img2" src="sample.png"></div> ; // Containgraphicjs; // Covergraphicjs;
Get the rendering area of the media.
Returns a bounding box for the visible region relative to the actual size of the media.
If the "object-fit" of the media element is "cover", the bounding box points to the orange part of the image below.
Also, if the "object-fit" of the media element is "contain", the bounding box points to the orange part of the image below.
; // Bounding box in the rendering areagraphicjs;// {"x":743.5,"y":0,"width":513,"height":684}
Draw a point.
<canvas id="myCanvas" width="400" height="300" style="background: black;"></canvas> ; // Returns a random integer from min to max { min = Math; max = Math; return Math + min;} // Returns a random color { return `hsl(, 100%, 55%)`;} // Draw a dot at the coordinates that the mouse passedconst myCanvas = document;myCanvas;
Draw a point in the center at multiple coordinates.
<canvas id="myCanvas" width="400" height="300" style="background: black;"></canvas> ; // Returns a random integer from min to max { min = Math; max = Math; return Math + min;} // Returns random coordinates { const maxX = ; const maxY = ; return ...ArraynumberOfCoordinates;} // Draw multiple pointsconst myCanvas = document;const coordinates = ;for let x y of coordinates graphicjs; // Draw the center point of multiple pointsgraphicjs;
Draw a rectangle.
<canvas id="myCanvas" width="400" height="300" style="background: black;"></canvas> ; // Returns a random color { return `hsl(, 100%, 55%)`;} // Returns a random integer from min to max { min = Math; max = Math; return Math + min;} // Draw a rectangleconst myCanvas = document;const canvasWidth = ;const canvasHeight = ;for let i=0; i<70; i++ const width = ; const height = ; const x = ; const y = ; const lineColor = ; const degree = ; graphicjs;
Draw the corners of a rectangle.
<canvas id="myCanvas" width="400" height="300" style="background: black;"></canvas> ; // Draw the corners of a rectangleconst myCanvas = document;const shadowColor = 'white';const shadowBlur = 4;graphicjs;graphicjs;graphicjs;graphicjs;
Draw a string on the canvas.
<canvas id="myCanvas" width="400" height="300" style="background: black;"></canvas> ; // Draw a string on the canvas.const myCanvas = document;graphicjs;graphicjs;graphicjs;graphicjs;graphicjs;graphicjs;graphicjs;
Draw a line.
<canvas id="myCanvas" width="400" height="300" style="background: black;"></canvas> ; // Returns a random integer from min to max { min = Math; max = Math; return Math + min;} // Returns a random color { return `hsl(, 100%, 55%)`;} // Draw sparks { const rad = MathPI * 2 / 8; const radius = ; const x = ; const y = ; for let i=1; i<9; i++ graphicjs; } // Draw a line.const myCanvas = document;myCanvasglobalCompositeOperation = 'lighter';for let i=0; i<196; i++ ;
Crop in a circle.
<canvas id="canvas"></canvas> ; // Crop the image in a circleconst croppedImg = await graphicjs;const canvas = document;canvaswidth = croppedImgwidth;canvasheight = croppedImgheight;canvas;
Dimensions of the area where the string is drawn.
; // Get text dimensionsgraphicjs;// {width: 56, height: 9} // Specify the fontgraphicjs;// {width: 73, height: 10}