Невозможно нарисовать в HTML Canvas из плагина Jquery

Question

Я создаю свой первый плагин Jquery.Я не могу нарисовать на холсте, с которым я его использую.

(function($){
    $.fn.graph=function(options){

    var settings=$.extend({
    color:'orange'
    },options);

    this.css({backgroundColor:settings.color});

    this.element=document.createElement('canvas');
    var ctx=this.element.getContext("2d");

    ctx.font = "30px Arial";
    ctx.fillText("Hello World", 10, 50);
    console.log(this.element);
    };
}(jQuery));

Answer 1

Ваш element необходимо добавить на страницу. Применение:

$( this.element ).appendTo( 'body' )

из .appendTo().

Вот окончательный код:

( function( $ ) {

  $.fn.graph = function( options ) {

    var settings = $.extend({

      color: 'orange'

    }, options );

    this.css({

      backgroundColor: settings.color

    });

    this.element = document.createElement( 'canvas' );
    $( this.element ).appendTo( 'body' );

    var ctx = this.element.getContext('2d');

    ctx.font = '30px Arial';
    ctx.fillText('Hello World', 10, 50);

    console.log( this.element );
  
  };

}( jQuery ) );

$( 'body' ).graph();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>