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

react-interactive-canvas

v1.0.2

Published

Declarative canvas components that support mouse events

Downloads

5

Readme

react-interactive-canvas

Declarative canvas components that support mouse events

NPM JavaScript Style Guide

Demo

To test local changes using the demo replace

"react-interactive-canvas": "x.x.x"

with

"react-interactive-canvas": "link.."

In the demo's package.json

Install

npm install --save react-interactive-canvas

Usage

import React, { Component } from 'react'

import { Canvas, TransparentImage, Rectangle, Circle } from 'react-interactive-canvas'

class Example extends Component {
  handleClick = id => {
    console.log(id);
  }

  render () {
    return (
      <Canvas width={1000} height={1000}>
        <TransparentImage
          src="/images/penguin.png"
          id="penguin" // Required. Must be unique for every child of a <Canvas/>
          x={100}
          y={100}
          width={200}
          height={200}
          onClick={this.handleClick}/>
        <Rectangle
          onClick={this.handleClick}
          x={10}
          y={40}
          width={35}
          height={60}
          fillStyle="#2b2b2b"
          id="grey-rectangle" // Required. Must be unique for every child of a <Canvas/>
        />
        <Circle
          onClick={this.handleClick}
          x={200}
          y={200}
          radius={5}
          fillStyle="blue"
          id="blue-circle" // Required. Must be unique for every child of a <Canvas/>
        />
      </Canvas>
    )
  }
}

How does it work?

There are four basic steps
  1. First draw each component on it's own little temporary "patch" canvas
  2. Draw all the patches onto the main visible canvas.
  3. Assign each component it's own unique color and swap out all non-transparent pixels on the patch canvases with those unique colors, masking the original pixels.
  4. Draw all the patches onto a hidden event canvas.

Once those steps are complete then for any mouse event on the main visible canvas you can just check the color of the corresponding pixel on the hidden event canvas to know which component was interacted with!

If the main canvas looks something like this:
Then after masking each component the event canvas might look something like this:

(it won't be visible to the user of course!)

Motivation

Honestly this package was built kinda just for fun. In 99% of use cases you're gonna be better off just using an SVG. The only situations in which this might be useful are

  1. You want pixel perfect* mouse event registration on the non-transparent pixels of an image.
  2. You want to draw A LOT of shapes. (Having a lot of SVG elements can cause performance issues)

*yeah so this isn't exactly pixel perfect but it's pretty close. Canvas anti-aliasing makes this... difficult. But not impossible! Drawing pixel perfect shapes is dooable but it's a lot slower and requires you to manually implement shape definitions. See the SAFE CIRCLE comment in Circle.js as an example.

Attribution

This project was bootstrapped using https://github.com/DimiMikadze/create-react-library

License

MIT © jbccollins