drawingcanvas
Reactive icon

DrawingCanvas

Stable version 2026.1.0 (Compatible with OutSystems 11)
Uploaded
 on 20 May (13 hours ago)
 by 
REQWARE
4.0
 (1 rating)
drawingcanvas

DrawingCanvas

Details
DrawingCanvas is a drawing plug-in that can draw handwriting, straight lines, circles, rectangles, etc. With the open source fabric.js as the core, it has simple functions similar to paint software, so you can write simple maps etc. on the browser. Toolbar and context menu are made up of WebBlock parts, so you can customize them as you like. In addition, since the free curve is drawn with Bezier curve, the line is smooth and the drawing data is lightweight.
Read more
Undo: Return to the previous state
Redo: Return to the next state
Range: selection Select a range object
Handwriting: Freehand drawing free lines
Line: Draw a straight line between two straight lines
Arrow: Draw an arrow between two points
Rectangle: Draw a rectangle surrounded by two points
Ellipse: Draw an ellipse surrounded by two points
Border width: Specify the border width of the figure
Border color: Specify the border color of the figure
Fill color: Specify the color to fill the inside of the figure.
Text: Enter text
Font size: Font size
Font color: Font color
Image upload: Upload and paste an image
Locking an object: Locking an object so that it cannot be selected
Unlock All: Unlock All Objects
Background image setting: Set as a background image and lock the image
Save to PNG: Save the canvas as PNG
Context menu
Copy: Copy the target object
Paste: Paste the target object
Move to the foreground: Move the target object to the foreground
Move to the back: Move the target object to the back
Grouping: Target objects are grouped (cannot be nested)
Ungrouping: Ungrouping the target object
Caputure: Save the target object as an image
Delete: Delete the target object
Short cut key
Ctrl + C: Copy the target object * Since it is via the clipboard, it is possible to paste data on other canvases.
Ctrl + V: Paste the target object
Ctrl + A: Select all objects
Delete: Delete the target object
? ? ? ?: Move the target object
Tab: Move between objects
Shift+Tab: Reverse movement between objects
Ctrl + Wheel: Zoom in / out of the canvas


Release notes (2026.1.0)
  • Breaking Change: Complete Redesign


This version is a complete redesign of the component and is not backward compatible with previous versions.


There is no migration path from earlier versions.

Applications using previous versions must be reviewed and updated manually.


Main changes:

- Redesigned the internal canvas architecture.

- Updated saved drawing data structure.

- Refactored the component for better maintainability and future extensibility.


Impact:

Applications that depend on previous internal object structures, saved JSON format, canvas size handling, or custom extensions may not work with this version without manual changes.


Important:

Drawing data created with previous versions may not be compatible with this version.

Please verify your use cases carefully before upgrading.


Recommended action:

If your application is already using an older version of this component, treat this upgrade as a new implementation rather than a simple version update.

Test all drawing, loading, saving, editing, and export features before using this version in production.

-----------------------------------------------------------------------------------

互換性のない変更: 完全刷新

本バージョンはコンポーネントを全面的に再設計したものであり、以前のバージョンとの下位互換性はありません。

旧バージョンからの移行手順はありません。
既存アプリケーションで利用している場合は、単純なバージョンアップではなく、再実装に近い対応が必要です。

主な変更点:
- canvas の内部アーキテクチャを全面的に再設計
- 保存データ構造を変更
- 今後の保守性・拡張性向上のため、内部処理を大幅にリファクタリング

影響:
旧バージョンの内部構造、保存 JSON、canvas サイズ管理、独自拡張に依存しているアプリケーションは、そのままでは動作しない可能性があります。

重要:
旧バージョンで作成された描画データは、本バージョンと互換性がない可能性があります。

推奨:
既存アプリケーションで利用している場合、本バージョンへの更新は単純なアップグレードではなく、新規導入として扱ってください。
本番環境へ適用する前に、描画・読み込み・保存・編集・エクスポートの各機能を十分に検証してください。


License (2026.1.0)

DrawingCanvas

Copyright (c) 2021 REQWARE Inc.

https://reqware.jp/


Product Terms of Use

Reviews (0)
Team
Other assets in this category