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

kami-context

v1.1.1

Published

WebGL context creation util

Downloads

4

Readme

kami-context

stable

WebGL context creation for kami. This is much like webgl-context, however, it includes a couple of convenience features, and also attempts to handle context loss events when used alongside other kami modules.

It is a relatively thin wrapper that can easily be used outside of the scope of other kami modules.

Throws an error if the WebGL context is not available.

Usage

NPM

//create a WebGL canvas and context...
var context = require('kami-context')({
	width: 500,
	height: 250,
	attributes: {
		antialias: true
	}
});

//append it to the DOM
document.body.appendChild( context.canvas );

//use it alongside other kami modules...
var tex = require('kami-texture')(context, {
	src: 'img.png'
});

Options:

  • width - sets the width of the canvas
  • height - sets the height of the canvas
  • attributes - the attributes to pass to the getContext call
  • handleContextLoss - default true; whether to try and handle context loss (no "Rats! WebGL Hit a Snag!" message)
  • usePixelRatio - default true; tries to handle retina displays by scaling the canvas with CSS

If you want, you can specify gl to the options, and it will use that WebGLRenderingContext (and its canvas) instead of re-requesting one. This is handy when using debuggers like WebGLInspector, which don't play as nicely with multiple calls to getContext.

If you didn't specify gl, you can instead pass canvas which uses a pre-existing canvas element rather than creating a new one.

properties

  • gl the actual WebGLRenderingContext.
  • width the width of the context
  • height the height of the context
  • canvas the canvas

events

  • lost a signal dispatched when the context is lost
  • restored a signal dispatched after the context has been restored

methods

resize(width, height)

Resizes the context and viewport to the given size. By default; this will resize the canvas based on devicePixelRatio, and then scale it back down with CSS for retina displays. You can disable this by specifying devicePixelRatio as false in the constructor or before calling resize.

destroy()

This is a convenience function to call destroy() on each 'managed object'. A 'managed object' is a kami module (like texture or shader) which has been created with this kami-context passed to its constructor.

It also clears references to the canvas and WebGLRenderingContext.

License

MIT, see LICENSE.md for details.