Katsushi Kawamori

<h4>Integrates Canvas into WordPress.</h4>
<ul>
<li>Provide canvas shortcode.</li>
<li>Provides a filter hook when saving the canvas.</li>
<li>It supports both mouse and touch.</li>
<li>It supports both the management screen and the public screen. The appearance of buttons and select boxes on the public screen depends on the CSS of the theme.</li>
</ul>
<h4>How to use the canvas</h4>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe class="youtube-player" width="640" height="360" src="https://www.youtube.com/embed/_9XWJJbY6mQ?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"></iframe></span>
<h4>Sample of how to use the filter hook</h4>
<ul>
<li>Shortcode for canvas display</li>
</ul>
<pre><code>echo do_shortcode( '[freecanvas height=500]' );
</code></pre>
<ul>
<li>shortcode<br />
Attribute : Default : Description<br />
width : 700 : Canvas width<br />
height : 700 : Canvas height<br />
name : The date and time string when the canvas was loaded : Unique name for this canvas<br />
form_name: null : The name of the form value you want to get<br />
form_name2: null : The name of the form value you want to get<br />
form_name3: null : The name of the form value you want to get</li>
<li>Filter hook & Function</li>
</ul>
<pre><code>/**
 * Filter hook & function for outputs a PNG image file */
 *
 * @param string $image_data  image_data.
 * @param string $name  name.
 * @param string $form_value  form_value.
 * @param string $form_value2  form_value2.
 * @param string $form_value3  form_value3.
 */
function canvas_save( $image_data, $name, $form_value, $form_value2, $form_value3 ) {
    $wp_uploads = wp_upload_dir();
    $relation_path_true = strpos( $wp_uploads['baseurl'], '../' );
    if ( $relation_path_true > 0 ) {
        $upload_dir = wp_normalize_path( realpath( $wp_uploads['basedir'] ) );
    } else {
        $upload_dir = wp_normalize_path( $wp_uploads['basedir'] );
    }
    $filename = $upload_dir . '/' . $name . '.png';
    $image = imagecreatefromstring( $image_data );
    imagepng( $image, $filename );
}
add_filter( 'free_canvas_save', 'canvas_save', 10, 5 );
</code></pre>
<ul>
<li>Filter hook<br />
Variable : Description : From<br />
$image_data : PNG image data by Base64 : Value of Canvas<br />
$name : Unique name for this canvas : Value of Free Canvas<br />
$form_value : Form value obtained from form_name : Value of Form<br />
$form_value2 : Form value obtained from form_name2 : Value of Form<br />
$form_value3 : Form value obtained from form_name3 : Value of Form</li>
</ul>


Free Canvas

Provide a canvas. Various cooperation is possible by shortcode and filter.

Miroku

<p><strong>Rakugaki Block</strong> is a block for gently adding hand-drawn, colored pencil-style doodles between paragraphs or at the end of blog posts.</p>
<p>The goal is not a full-featured drawing app. The concept is based on <strong>quick, impromptu scribbles that can be written in a few seconds</strong>.</p>
<h4>Features</h4>
<ul>
<li>Colored-pencil brush with texture (roughness and fading)</li>
<li>12-color pencil palette</li>
<li>Three canvas sizes: S / M / L</li>
<li>Freely configurable background color</li>
<li>Pen tablet support with pressure sensitivity</li>
<li>Undo and Clear functions</li>
<li>Accessibility support (alt text for the canvas)</li>
</ul>
<h4>How to Use</h4>
<ol>
<li>Open the post or page editor</li>
<li>Click the block inserter ( + )</li>
<li>Search for “Rakugaki Block” and add it</li>
<li>Draw freely with your mouse, touch, or pen tablet</li>
<li>Adjust the size and background color in the sidebar</li>
</ol>
<h4>Pen Tablet Support</h4>
<p>The block uses the Pointer Events API, so pen pressure is reflected in line width and opacity when drawing with a compatible tablet.</p>
<h3>Source Code</h3>
<p>The source files for this plugin are included in the <code>src/</code> directory.<br />
The <code>build/</code> directory contains the compiled assets generated from those source files.</p>
<p>To rebuild the assets, run:</p>
<ol>
<li><code>npm install</code></li>
<li><code>npm run build</code></li>
</ol>


Rakugaki Block

A Gutenberg block that allows you to draw with colored pencils, adding a warm, handwritten touch to your blog.

Free Canvas vs Rakugaki Block