# @jasonsbarr/htdp-image

> A JavaScript port of the Racket Image library used in How To Design Programs

Latest version **0.8.0** (published 2023-08-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @jasonsbarr/htdp-image
pnpm add @jasonsbarr/htdp-image
yarn add @jasonsbarr/htdp-image
bun add @jasonsbarr/htdp-image
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.0 |
| Published | 2023-08-02 |
| First published | 2023-07-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jason Barr |
| Maintainers | jasonsbarr |
| Keywords | images, htdp, canvas |

## Links

- npm: https://www.npmjs.com/package/@jasonsbarr/htdp-image
- Repository: https://github.com/jasonsbarr/htdp-image
- Homepage: https://github.com/jasonsbarr/htdp-image#readme
- Issues: https://github.com/jasonsbarr/htdp-image/issues
- npm.io page: https://npm.io/package/@jasonsbarr/htdp-image

## Dependencies (3)

- [jsdom](https://npm.io/package/jsdom.md) ^22.1.0
- [object-hash](https://npm.io/package/object-hash.md) ^3.0.0
- [fast-deep-equal](https://npm.io/package/fast-deep-equal.md) ^3.1.3

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.8.0 (latest) — 2023-08-02
- 0.7.3 — 2023-08-01
- 0.7.2 — 2023-07-30
- 0.7.1 — 2023-07-29
- 0.7.0 — 2023-07-25
- 0.6.3 — 2023-07-24
- 0.6.1 — 2023-07-24
- 0.6.0 — 2023-07-24
- 0.5.0 — 2023-07-23
- 0.2.1 — 2023-07-23
- 0.2.0 — 2023-07-23
- 0.1.1 — 2023-07-23
- 0.1.0 — 2023-07-23
- 0.0.5 — 2023-07-23
- 0.0.4 — 2023-07-23
- … 3 more at https://npm.io/package/@jasonsbarr/htdp-image/versions

## README

# HTDP/Image.js

A JavaScript port of the Racket Image library used in How To Design Programs.

Shared via the MIT License under the terms of [the original HTDP library's license](https://github.com/racket/htdp/blob/master/htdp-lib/LICENSE).

Special thanks to [Joe Gibbs Politz](https://twitter.com/joepolitz) and [Ben Lerner](https://www.khoury.northeastern.edu/people/benjamin-lerner/) for all their work on the Pyret language, Danny Yoo, Emmanuel Schanzer, and Ben Lerner for doing the bulk of the work translating the Image library from Racket into the original JavaScript version that was adapted for Pyret, and to all others who have worked on the code for this library. All I'm really doing is updating their work to use modern JavaScript syntax and idioms.

**Warning:** This port is still in beta status as we continue testing it. Use at your own risk.

## Installation

Simply run `npm install @jasonsbarr/htdp-image` to install the package. There are bundles for CJS modules, ES modules, and UMD modules.

## Usage

For use with ES Modules:

```js
import * as Image from "@jasonsbarr/htdp-image";

const square = Image.square(20, "solid", "red");
Image.render(square);
```

Or import a single function:

```js
import { square, render } from "@jasonsbarr/htdp-image";
```

For use with CommonJS (classic Node.js) modules:

```js
const Image = require("@jasonsbarr/htdp-image");

// or

const { square, render } = require("@jasonsbarr/htdp-image");
```

If you need the library available as a global variable in the browser you can simply include the bundle from unpkg:

```html
<script src="https://www.unpkg.com/@jasonsbarr/htdp-image@0.8.0/dist/index.umd.js"></script>

<script>
  const square = htdpImage.square(20, "solid", "red");
  htdpImage.render(square);
</script>
```

Image functions should run in both browser and Node.js (via JSDom) environments, so you should be able to do testing with a test runner like Mocha using this library.

## Documentation

The documentation is very much still a work in progress, if you can even call it that. I recommend using [the documentation for the original Racket library](https://docs.racket-lang.org/teachpack/2htdpimage.html) for now while I translate it into JavaScript. Note that in this library all function names are written in camelCase. The `triangle-*` functions have the letters all capitalized, e.g. `triangleSAS`.

### Rendering Images

Note that I've added an additional `render` function that is exported as a member of the main library that is necessary to render images to the screen in a vanilla JavaScript environment. It calls the `render` method on the image given to it and takes as an optional 2nd parameter a selected DOM element to render the image to (defaults to `document.body`).

The original Racket package obviously doesn't need this extra rendering function, so you won't find it in the documentation for it.

---
_Source: https://npm.io/package/@jasonsbarr/htdp-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._