PHPackages                             element119/module-hyva-canvas - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. element119/module-hyva-canvas

ActiveMagento2-module[Utility & Helpers](/categories/utility)

element119/module-hyva-canvas
=============================

A Magento 2 module that adds an AlpineJS-powered HTML canvas component to Hyvä themes.

1.0.1(3y ago)32.1k↓33.3%1[1 issues](https://github.com/pykettk/module-hyva-canvas/issues)OSL-3.0HTML

Since Oct 31Pushed 1y agoCompare

[ Source](https://github.com/pykettk/module-hyva-canvas)[ Packagist](https://packagist.org/packages/element119/module-hyva-canvas)[ RSS](/packages/element119-module-hyva-canvas/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (2)Dependencies (1)Versions (3)Used By (0)

element119 | Hyvä Canvas
========================

[](#element119--hyvä-canvas)

[![github release](https://camo.githubusercontent.com/5086dab83cb70cad9908a0a6e94fe9bdaec7b23d57e38ec8f2998540b268d50a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f70796b6574746b2f6d6f64756c652d687976612d63616e7661733f636f6c6f723d666662663030266c6162656c3d76657273696f6e)](https://camo.githubusercontent.com/5086dab83cb70cad9908a0a6e94fe9bdaec7b23d57e38ec8f2998540b268d50a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f70796b6574746b2f6d6f64756c652d687976612d63616e7661733f636f6c6f723d666662663030266c6162656c3d76657273696f6e)[![github release date](https://camo.githubusercontent.com/7b07004fb4dfd9ba07ba8ffaf70b60146de9d7f3bab38a4fcfaa44dc5a9e2fbc/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652d646174652f70796b6574746b2f6d6f64756c652d687976612d63616e7661733f636f6c6f723d386233326138266c6162656c3d6c61737425323072656c65617365)](https://camo.githubusercontent.com/7b07004fb4dfd9ba07ba8ffaf70b60146de9d7f3bab38a4fcfaa44dc5a9e2fbc/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652d646174652f70796b6574746b2f6d6f64756c652d687976612d63616e7661733f636f6c6f723d386233326138266c6162656c3d6c61737425323072656c65617365)[![license](https://camo.githubusercontent.com/d5825877ca1b85c91501e0d9b5e7f47a88b371c399f58d8ac38d1686d4508a08/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4f534c2d6666303064642e737667)](https://camo.githubusercontent.com/d5825877ca1b85c91501e0d9b5e7f47a88b371c399f58d8ac38d1686d4508a08/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4f534c2d6666303064642e737667)[![packagist downloads](https://camo.githubusercontent.com/11cac784881fadaf1e09c2428e1f48e47a409a4c2fce5053ec3ecff347a359f6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f656c656d656e743131392f6d6f64756c652d687976612d63616e7661733f636f6c6f723d666630303030)](https://camo.githubusercontent.com/11cac784881fadaf1e09c2428e1f48e47a409a4c2fce5053ec3ecff347a359f6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f656c656d656e743131392f6d6f64756c652d687976612d63616e7661733f636f6c6f723d666630303030)

---

[![hyva-canvas](https://user-images.githubusercontent.com/40261741/199095544-11614a6e-a1c6-4326-84d2-50e3c4df13cf.gif)](https://user-images.githubusercontent.com/40261741/199095544-11614a6e-a1c6-4326-84d2-50e3c4df13cf.gif)

📝 Features
----------

[](#-features)

✔️ Adds an AlpineJS-powered canvas component to Hyvä themes

✔️ Allows customers to draw, reset, and submit canvas data

✔️ Responsive design to suit mobile and desktop devices

✔️ Supports multiple canvas components per page

🔌 Installation
--------------

[](#-installation)

Run the following command to *install* this module:

```
composer require element119/module-hyva-canvas
php bin/magento setup:upgrade
```

⏫ Updating
----------

[](#-updating)

Run the following command to *update* this module:

```
composer update element119/module-hyva-canvas
php bin/magento setup:upgrade
```

❌ Uninstallation
----------------

[](#-uninstallation)

Run the following command to *uninstall* this module:

```
composer remove element119/module-hyva-canvas
php bin/magento setup:upgrade
```

📚 User Guide
------------

[](#-user-guide)

### Adding the Canvas Component

[](#adding-the-canvas-component)

To add the canvas component to a page, simply use layout XML to create a new block using the `Element119_HyvaCanvas::canvas.phtml` template.

```

```

### Obtaining the Canvas Value

[](#obtaining-the-canvas-value)

A custom JavaScript event is fired whenever the user submits their canvas data. This event name is `customer-canvas-submitted` and the canvas data can be accessed via its `detail` object:

```
{
    ...
    detail: {
        canvasBlockName: "my_canvas_component",
        canvasImage: "data:image/png;base64,iVBORw0...",
    },
    ...
}

```

[![canvas-demo](https://user-images.githubusercontent.com/40261741/199095607-829a692f-db1e-41b3-b313-663b5295c00f.gif)](https://user-images.githubusercontent.com/40261741/199095607-829a692f-db1e-41b3-b313-663b5295c00f.gif)

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance28

Infrequent updates — may be unmaintained

Popularity24

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity47

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

2

Last Release

1285d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/9eb2b9f555deb74b70b6fa37fe4e505579581ee49c6ca3420dcd769602cf8107?d=identicon)[pykettk](/maintainers/pykettk)

---

Top Contributors

[![pykettk](https://avatars.githubusercontent.com/u/40261741?v=4)](https://github.com/pykettk "pykettk (14 commits)")

---

Tags

hyva-communityhyva-themesmagentomagento2

### Embed Badge

![Health badge](/badges/element119-module-hyva-canvas/health.svg)

```
[![Health](https://phpackages.com/badges/element119-module-hyva-canvas/health.svg)](https://phpackages.com/packages/element119-module-hyva-canvas)
```

###  Alternatives

[blackbird/hyva-splide-js

An implementation of SplideJS library in Hyvä Theme for Magento 2

2016.7k](/packages/blackbird-hyva-splide-js)[vendic/hyva-checkout-google-address-autocomplete

Hyvä checkout compatibility module for vendic/magento2-google-address-autocomplete

1331.3k1](/packages/vendic-hyva-checkout-google-address-autocomplete)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)