mzur/ImageCanvas.js

## ImageCanvas.js
import ImageStatic from 'ol/source/ImageStatic';
import ImageCanvas from 'ol/ImageCanvas';
import EventType from 'ol/events/EventType';
import {listen} from 'ol/events';

class Canvas extends ImageStatic {
   constructor(options) {
      super(options);
      this.image_ = new ImageCanvas(options.imageExtent, 1, 1, options.canvas);
      listen(this.image_, EventType.CHANGE, this.handleImageChange, this);
   }
}

export default Canvas;

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
      #map {
        width: 400px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>

## index.js
import 'ol/ol.css';
import {Map, View} from 'ol';
import ImageLayer from 'ol/layer/Image';
import ImageSource from './ImageCanvas.js';
import Projection from 'ol/proj/Projection';
import {getCenter} from 'ol/extent';

let canvas = document.createElement('canvas');
// Set dimensions of image.
canvas.width = 100;
canvas.height = 100;
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 100, 100);

let extent = [0, 0, canvas.width, canvas.height];
let projection = new Projection({
   code: 'pixel-projection',
   units: 'pixels',
   extent: extent,
});

const map = new Map({
  target: 'map',
  layers: [
    new ImageLayer({
      source: new ImageSource({
        canvas: canvas,
        projection: projection,
        imageExtent: extent,
      }),
    }),
  ],
  view: new View({
    projection: projection,
    center: getCenter(extent),
    // Initially, display canvas at original resolution (100%).
    resolution: 1,
    zoomFactor: 2,
    // Allow a maximum of 4x magnification.
    minResolution: 0.25,
    // Restrict movement.
    extent: extent,
  }),
});
	import ImageStatic from 'ol/source/ImageStatic';
	import ImageCanvas from 'ol/ImageCanvas';
	import EventType from 'ol/events/EventType';
	import {listen} from 'ol/events';

	class Canvas extends ImageStatic {
	constructor(options) {
	super(options);
	this.image_ = new ImageCanvas(options.imageExtent, 1, 1, options.canvas);
	listen(this.image_, EventType.CHANGE, this.handleImageChange, this);
	}
	}

	export default Canvas;
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Using Parcel with OpenLayers</title>
	<style>
	#map {
	width: 400px;
	height: 250px;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script src="./index.js"></script>
	</body>
	</html>
	import 'ol/ol.css';
	import {Map, View} from 'ol';
	import ImageLayer from 'ol/layer/Image';
	import ImageSource from './ImageCanvas.js';
	import Projection from 'ol/proj/Projection';
	import {getCenter} from 'ol/extent';

	let canvas = document.createElement('canvas');
	// Set dimensions of image.
	canvas.width = 100;
	canvas.height = 100;
	let ctx = canvas.getContext('2d');
	ctx.fillStyle = 'green';
	ctx.fillRect(0, 0, 100, 100);

	let extent = [0, 0, canvas.width, canvas.height];
	let projection = new Projection({
	code: 'pixel-projection',
	units: 'pixels',
	extent: extent,
	});

	const map = new Map({
	target: 'map',
	layers: [
	new ImageLayer({
	source: new ImageSource({
	canvas: canvas,
	projection: projection,
	imageExtent: extent,
	}),
	}),
	],
	view: new View({
	projection: projection,
	center: getCenter(extent),
	// Initially, display canvas at original resolution (100%).
	resolution: 1,
	zoomFactor: 2,
	// Allow a maximum of 4x magnification.
	minResolution: 0.25,
	// Restrict movement.
	extent: extent,
	}),
	});