npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

canvas-grid-lines

v2.2.0

Published

Draws grid lines as HTML canvas element (baseline, squared and more)

Downloads

807

Readme

canvas-grid-lines

npm license github-issues !

Draws grid lines as HTML canvas element (baseline, squared and more)

stars forks

Features

  • Multiple grid types available:

    • baseline (horizontal lines)
    • squared (horizontal and vertical lines)
    • columns (vertical lines showing columns with gaps)
    • rows (vertical lines for columns without gaps and horizontal lines)
  • Retina/high res: The grid is automatically adapted to the screen’s resolution and redrawn any time the window is resized.

  • Crisp and precise: The grid lines are set precisely onto the physical pixels of the screen thus they are always crisp. This distinguishes them from lines shown by SVG background images or drawn with CSS gradients.

  • Column count updatable: Already drawn grids may be updated with a new grid count.

  • Self-placing: A html canvas element will be added automatically to all html elements the script is applied to. If the given elements have no css position, position: relative will be added automatically.

Installation

npm install --save canvas-grid-lines

Usage

HTML

<div data-grid="squared"></div>

Initialize the grid(s)

import { canvasGridLines } from 'canvas-grid-lines';

let grids = canvasGridLines.initGrid(
    '[data-grid]',
    59,
    1,
    canvasGridLines.Units.LayoutPixel,
    false,
    '#000000'
);

Updating the columnCount

The grid will be redrawn automatically

canvasGridLines.setColumns(29);

Configuration

HTML elements to be used

Any querySelectorAll-compatible selector may be given. In the example code above the data attribute needed for the grid type is used.

Grid Type

The grid type is read from a mandatory data attribute data-gridand may be of the following values: baseline, squared, columns, rows

Line width

Line width as integer or float.

Units (optional, default: LayoutPixel)

The units parameter tells the script how to interpret the line width: either layout size (as in CSS) or physical pixels.

Extend (optional, default: false)

Lines are always drawn onto the center of the grid calculated with zero line width. The sides of thicker lines thus protrude the html element. This parameter controls whether the ends of lines will also be extended.

Color (optional, default: black)

A CSS color value setting the lines’ color.

License

  • ISC : http://opensource.org/licenses/ISC

Keyword